定义一个名为 "--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

CSS 语法

var(custom-property-name, value)

值

描述

custom-property-name

必需。自定义属性的名称，必需以 -- 开头。

value

可选。备用值，在属性不存在的时候使用。

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

必须先定义后使用

变量需要通过 --变量名: 值; 的形式定义，才能用 var(--变量名) 引用

注意事项：

  • 变量名区分大小写（--height 和 --Height 是两个不同变量）。
  • 变量值可以是任何 CSS 合法值（长度、颜色、字符串等）。
  • 如果变量未定义且未设置默认值，会使用浏览器默认样式。