CSS var() 函数

CSS var() 函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。

实例

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

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>
<h2>var() 函数</h2>
<div id="div1">成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势平坦、河网纵横、物产丰富，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</div>
<br>
<div id="div2">成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势平坦、河网纵横、物产丰富，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</div>
<br>
<div id="div3">成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势平坦、河网纵横、物产丰富，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</div>
</body>
</html>

运行一下

定义和用法

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

版本：	CSS3

浏览器支持

表格中的数字注明了完全支持该功能的首个浏览器版本。

函数
var()	49.0	15.0	31.0	9.1	36.0

CSS 语法

var(custom-property-name, value)

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

更多实例

使用 var() 函数插入几个自定义属性值：

<!DOCTYPE html>
<html>
<head>
<style>
: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);
}
</style>
</head>
<body>
<h2>var() 函数</h2>
<div id="div1">成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势平坦、河网纵横、物产丰富，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</div>
<br>
<div id="div2">成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势平坦、河网纵横、物产丰富，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</div>
<br>
<div id="div3">成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势平坦、河网纵横、物产丰富，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</div>
</body>
</html>