--*
--*
这是一种实验技术
由于该技术的规范尚不稳定，请查看各种浏览器的兼容性表格以查阅用法。还要注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
带有前缀--的属性名称，如--example-name表示自定义属性，通过使用var()函数，可以在整个文档中重用它所包含的值。
自定义属性参与级联：它们中的每一个都可以出现多次，变量的值将与通过级联算法决定的自定义属性中定义的值相匹配。
| Initial value | see prose |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Media | all |
| Computed value | as specified with variables substituted |
| Animation type | discrete |
| Canonical order | per grammar |
语法
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54
<declaration-value>这个值匹配包含一个或多个记号的任何序列，只要该序列不包含不允许的记号。它代表了所有能作为有效声明的值的内容。
形式语法
<declaration-value>
实例
HTML
<p id="firstParagraph">This paragraph should have a blue background and yellow text.</p>
<p id="secondParagraph">This paragraph should have a yellow background and blue text.</p>
<div id="container">
<p id="thirdParagraph">This paragraph should have a green background and yellow text.</p>
</div>
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 | Status | Comment |
|---|---|---|
| CSS Custom Properties for Cascading Variables Module Level 1The definition of '--*' in that specification. | Working Draft | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 48.01 49.0 | 15 | 29.0 (29.0)2 31.0 (31.0) | No support | 36.0 | 9.33 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 50.0 | 29.0 (29.0) | No support | 37.0 | 9.33 |
