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