CSS var() 函数

星星跌入梦境

CSS var() 函数

实例

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

版权声明:本页面内容旨在传播知识,为用户自行发布,若有侵权等问题请及时与本网联系,我们将第一时间处理。E-mail:284563525@qq.com

目录[+]

取消
微信二维码
微信二维码
支付宝二维码