CSS var() 函数
示例
首先，声明一个名为 "--main-bg-color" 的全局变量，然后在样式表中使用 var() 函数插入该变量的值
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
var() 函数用于插入 CSS 变量的值。
| 版本 | CSS3 |
|---|
浏览器支持
表中数字表示该函数完全支持的第一个浏览器版本。
| 函数 | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS 语法
var(--名称, 值)
| 值 | 描述 |
|---|---|
| name | 必需。变量名（必须以两个破折号开头） |
| value | 可选。回退值（如果找不到变量则使用） |
更多示例
示例
另一个使用 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 教程：CSS 变量
