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() 函数用于插入自定义属性的值，而不是另一个属性的值的任何部分。

版本： CSS3

浏览器支持

表格中的数字注明了完全支持该功能的首个浏览器版本。

函数
var() 49.0 15.0 31.0 9.1 36.0

CSS 语法

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

亲自试一试

相关页面

CSS 教程：CSS 变量