CSS var() 函数

最后更新于：2022-03-27 02:40:43

实例

定义一个名为 “–main-bg-color” 的属性，然后使用 var() 函数调用该属性：

:root {
—main-bg-color: coral;
}

#div1 {
background-color: var(–main-bg-color);
}

#div2 {
background-color: var(–main-bg-color);
}

var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

支持版本：CSS3

表格中的数字表示支持该函数的第一个浏览器版本号。

函数
var()	49.0	15.0	31.0	9.1	36.0

var(custom-property-name, value)

值	描述
custom-property-name	必需。自定义属性的名称，必需以 — 开头。
value	可选。备用值，在属性不存在的时候使用。

使用 var() 函数调用多个自定义的值：

:root {
—main-bg-color: coral;
—main-txt-color: blue;
—main-padding: 15px;
}

#div1 {
background-color: var(–main-bg-color);
color: var(–main-txt-color);
padding: var(–main-padding);
}

#div2 {
background-color: var(–main-bg-color);
color: var(–main-txt-color);
padding: var(–main-padding);
}