CSS var()函数 - 蝴蝶教程

定义和用法

var()函数用于插入自定义属性的值，而不是另一个属性的值的任何部分。

特征	说明
CSS版本	CSS3

浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

函数	IE/Edge	Chrome	FireFox	Safari	Opera
函数名称
var()	15.0	49.0	31.0	9.1	36.0

CSS语法

var(custom-property-name, value)

值	描述
custom-property-name	必需的。自定义属性的名称（必须以两个破折号开头）
value	可选的。回退值（如果自定义属性无效，则使用）

实例

首先定义一个名为“--main-bg-color”的自定义属性，然后使用var()函数在样式表中稍后插入自定义属性的值：

:root {
  --main-bg-color: coral; 
}

#div1 {
  background-color: var(--main-bg-color); 
}

#div2 {
  background-color: var(--main-bg-color);
}

尝试一下

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

尝试一下