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)
值 | 描述 |
---|---|
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 变量