此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
自定义属性（--*）：CSS 变量
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年4月.
带有前缀-- 的属性名，比如--example--name，表示的是带有值的自定义属性，其可以通过var() 函数在全文档范围内复用的。
CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。
语法
css
--somekeyword: left;--somecolor: #0000ff;--somecomplexvalue: 3px 6px rgb(20, 32, 54);<declaration-value>这个值将会由一个或者多个语法执行出来，只要这些语法是正确合理的，不包含非法语句。这个值就理应是有效语法执行出来的值。
备注：自定义属性名区分大小写——--my-color 会被视为与--My-color 不同的自定义属性。
示例
HTML
html
<p>此段落应有蓝色背景和黄色文本。</p><p>此段落应有黄色背景和蓝色文本。</p><div> <p>此段落应有绿色背景和黄色文本。</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 |