Docs/docs/zh/beamng/css-snippets.md

!!! warning "本页面正在建设中！"

本站点目前正处于积极开发与维护阶段。

觉得您可以提供帮助？请点击页面右侧的铅笔图标参与编辑！
此操作适用于站内的任何页面。

BeamNG.drive CSS Code 的片段

常见变量

=== BeamNG Orange

```css
var(--bng-orange) /*Common orange*/
var(--bng-orange-shade1) /*70% opacity*/
var(--bng-orange-shade2) /*40% opacity*/
var(--bng-orange-shade1opaque)
var(--bng-orange-shade2opaque)

=== Monochrome

--- Monochrome
var(--bng-black-8) /*80% opacity (duplicate --bng-black-o8)*/
var(--bng-black-6) /*60% opacity (duplicate --bng-black-o6)*/
var(--bng-black-4) /*40% opacity (duplicate --bng-black-o4)*/
var(--bng-black-2) /*20% opacity (duplicate --bng-black-o2)*/

var(--dark-neutral-grey)
var(--neutral-grey)
var(--light-neutral-grey)
var(--dark-grey)
var(--dark-grey-alpha) /*80% opacity*/

var(--black-1) /*70% opacity*/
var(--black-2) /*40% opacity (duplicate --bng-black-o4)*/

var(--white-1) /*80% opacity*/
var(--white-2) /*40% opacity*/
var(--white-3) /*20% opacity*/

=== BeamNG 界面颜色调色板

=== Orange

```css
var(--bng-orange-50)
var(--bng-orange-100)
var(--bng-orange-200)
var(--bng-orange-300)
var(--bng-orange-b400)
var(--bng-orange-500)
var(--bng-orange-600)
var(--bng-orange-700)
var(--bng-orange-800)
var(--bng-orange-900)
```

=== Cool Gray

```css
var(--bng-cool-gray-50)
var(--bng-cool-gray-100)
var(--bng-cool-gray-200)
var(--bng-cool-gray-300)
var(--bng-cool-gray-400)
var(--bng-cool-gray-500)
var(--bng-cool-gray-600)
var(--bng-cool-gray-700)
var(--bng-cool-gray-800)
var(--bng-cool-gray-900)
```

=== Ter Blue css var(--bng-ter-blue-50) var(--bng-ter-blue-100) var(--bng-ter-blue-200) var(--bng-ter-blue-300) var(--bng-ter-blue-400) var(--bng-ter-blue-500) var(--bng-ter-blue-600) var(--bng-ter-blue-700) var(--bng-ter-blue-800) var(--bng-ter-blue-900)

=== Add Blue css var(--bng-add-blue-50) var(--bng-add-blue-100) var(--bng-add-blue-200) var(--bng-add-blue-300) var(--bng-add-blue-400) var(--bng-add-blue-500) var(--bng-add-blue-600) var(--bng-add-blue-700) var(--bng-add-blue-800) var(--bng-add-blue-900)

=== Add Green css var(--bng-add-green-50) var(--bng-add-green-100) var(--bng-add-green-200) var(--bng-add-green-300) var(--bng-add-green-400) var(--bng-add-green-500) var(--bng-add-green-600) var(--bng-add-green-700) var(--bng-add-green-800) var(--bng-add-green-900)

=== Add Yellow css var(--bng-add-yellow-50) var(--bng-add-yellow-100) var(--bng-add-yellow-200) var(--bng-add-yellow-300) var(--bng-add-yellow-400) var(--bng-add-yellow-500) var(--bng-add-yellow-600) var(--bng-add-yellow-700) var(--bng-add-yellow-800) var(--bng-add-yellow-900)

=== Add Peach css var(--bng-add-peach-50) var(--bng-add-peach-100) var(--bng-add-peach-200) var(--bng-add-peach-300) var(--bng-add-peach-400) var(--bng-add-peach-500) var(--bng-add-peach-600) var(--bng-add-peach-700) var(--bng-add-peach-800) var(--bng-add-peach-900)

=== Add Red css var(--bng-add-red-50) var(--bng-add-red-100) var(--bng-add-red-200) var(--bng-add-red-300) var(--bng-add-red-400) var(--bng-add-red-500) var(--bng-add-red-600) var(--bng-add-red-700) var(--bng-add-red-800) var(--bng-add-red-900)

=== 额外颜色预设

var(--bng-filter-orange) /*Filter preset to force SVGs to use bng-orange*/
var(--bng-black-o8) /*80% opacity*/
var(--bng-black-o6) /*60% opacity*/
var(--bng-black-o4) /*40% opacity*/
var(--bng-black-o2) /*20% opacity*/

=== 圆角预设

var(--bng-corners-1) /*0.25rem*/
var(--bng-corners-2) /*0.50rem*/
var(--bng-corners-3) /*1.00rem*/