编辑这个页面须要登录或更高权限！

CSS var() 函数

var()函数可以用作元素的任何属性中的值。 var()函数不能用作属性名称，选择器或除属性值以外的任何东西。（这样做通常会导致语法错误或与变量无关的值）。

CSS 函数

在线示例

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(cainiaojc.com)</title>
<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>
<h1>var() 函数</h1>
<div id="div1">菜鸟教程(cainiaojc.com) - 学好基础,才能走的更远！</div>
<br>
<div id="div2">菜鸟教程(cainiaojc.com) - 学好基础,才能走的更远！</div>
<br>
<div id="div3">菜鸟教程(cainiaojc.com) - 学好基础,才能走的更远！</div>
</body>
</html>
测试看看 ‹/›

定义与用法

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

支持版本：CSS3

浏览器兼容性

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

函数




var()49.015.031.09.136.0

CSS 语法

var(custom-property-name, value)
值描述
custom-property-name必需。自定义属性的名称，必需以 --  开头。
value可选。备用值，在属性不存在的时候使用。

更多示例

在线示例

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(cainiaojc.com)</title>
<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>
<h1>var() 函数</h1>
<div id="div1">菜鸟教程(cainiaojc.com) - 学好基础,才能走的更远！</div>
<br>
<div id="div2">菜鸟教程(cainiaojc.com) - 学好基础,才能走的更远！</div>
<br>
<div id="div3">菜鸟教程(cainiaojc.com) - 学好基础,才能走的更远！</div>
</body>
</html>
测试看看 ‹/›

CSS 函数

CSS @charset 规则CSS 函数(Functions)

CSS 参考手册
CSS @规则(RULES)
CSS 属性大全