CSS var() 函数

定义和用法

CSS 的 var() 函数用于插入 CSS 变量的值。

实例

例子 1

首先,声明一个名为 --main-bg-color 的全局变量,然后在样式表中使用 var() 函数插入该变量的值:

:root {
 --main-bg-color: coral;
}
#div1 {
 background-color: var(--main-bg-color);
}
#div2 {
 background-color: var(--main-bg-color);
}

亲自试一试

例子 2

另一个使用 var() 函数插入多个 CSS 变量值的例子:

: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);
}

亲自试一试

CSS 语法

var(--name, value)

技术细节

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

相关页面

教程:CSS 变量