CSS var() 函数

CSS 函数 CSS 函数

实例

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