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 语法

var(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 变量