自定义属性（--*）：CSS 变量

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

带有前缀 -- 的属性名，比如 --example--name，表示的是带有值的自定义属性，其可以通过 var() 函数在全文档范围内复用的。

CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。

初始值	see prose
适用元素	所有元素
是否是继承属性	是
计算值	as specified with variables substituted
动画类型	离散值

语法

css

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);

<declaration-value>: 这个值将会由一个或者多个语法执行出来，只要这些语法是正确合理的，不包含非法语句。这个值就理应是有效语法执行出来的值。

备注：自定义属性名区分大小写——--my-color 会被视为与 --My-color 不同的自定义属性。

示例

HTML

html

<p id="firstParagraph">此段落应有蓝色背景和黄色文本。</p>
<p id="secondParagraph">此段落应有黄色背景和蓝色文本。</p>
<div id="container">
  <p id="thirdParagraph">此段落应有绿色背景和黄色文本。</p>
</div>

CSS

css

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

结果

规范

Specification
CSS Custom Properties for Cascading Variables Module Level 1 # defining-variables

浏览器兼容性

BCD tables only load in the browser

参见

使用 CSS 变量
var() 函数