html中var函数,CSS var() 函数

在线示例

定义一个名为 "--main-bg-color" 的属性，然后使用 var() 函数调用该属性：

示例html>

基础教程(nhooo.com)

:root {

--main-bg-color: coral;

}

#div1 {

background-color: var(--main-bg-color);

padding: 5px;

}

#div2 {

background-color: var(--main-bg-color);

padding: 5px;

}

#div3 {

background-color: var(--main-bg-color);

padding: 5px;

}

var() 函数

基础教程nhooo.com - 学好基础,才能走的更远！

基础教程nhooo.com - 学好基础,才能走的更远！

基础教程nhooo.com - 学好基础,才能走的更远！

测试看看 ‹/›

定义与用法

var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

支持版本：CSS3

浏览器兼容性

表格中的数字表示支持该函数的第一个浏览器版本号。函数

var()49.015.031.09.136.0

CSS 语法var(custom-property-name, value)值描述

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

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

更多示例

在线示例

使用 var() 函数调用多个自定义的值：

示例html>

基础教程(nhooo.com)

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

}

#div3 {

background-color: var(--main-bg-color);

color: var(--main-txt-color);

padding: var(--main-padding);

}

var() 函数

基础教程nhooo.com - 学好基础,才能走的更远！

基础教程nhooo.com - 学好基础,才能走的更远！

基础教程nhooo.com - 学好基础,才能走的更远！

测试看看 ‹/›