var()函數(shù)可以用作元素的任何屬性中的值。 var()函數(shù)不能用作屬性名稱，選擇器或除屬性值以外的任何東西。（這樣做通常會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤或與變量無(wú)關(guān)的值）。
定義一個(gè)名為 "--main-bg-color" 的屬性，然后使用 var() 函數(shù)調(diào)用該屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(cainiaoplus.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() 函數(shù)</h1>
<div id="div1">菜鳥教程(cainiaoplus.com) - 學(xué)好基礎(chǔ),才能走的更遠(yuǎn)！</div>
<br>
<div id="div2">菜鳥教程(cainiaoplus.com) - 學(xué)好基礎(chǔ),才能走的更遠(yuǎn)！</div>
<br>
<div id="div3">菜鳥教程(cainiaoplus.com) - 學(xué)好基礎(chǔ),才能走的更遠(yuǎn)！</div>
</body>
</html>測(cè)試看看 ?/?var() 函數(shù)用于插入自定義的屬性值，如果一個(gè)屬性值在多處被使用，該方法就很有用。
支持版本：CSS3
表格中的數(shù)字表示支持該函數(shù)的第一個(gè)瀏覽器版本號(hào)。
| 函數(shù) | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
var(custom-property-name, value)
| 值 | 描述 |
|---|---|
| custom-property-name | 必需。自定義屬性的名稱，必需以 -- 開頭。 |
| value | 可選。備用值，在屬性不存在的時(shí)候使用。 |
使用 var() 函數(shù)調(diào)用多個(gè)自定義的值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(cainiaoplus.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() 函數(shù)</h1>
<div id="div1">菜鳥教程(cainiaoplus.com) - 學(xué)好基礎(chǔ),才能走的更遠(yuǎn)！</div>
<br>
<div id="div2">菜鳥教程(cainiaoplus.com) - 學(xué)好基礎(chǔ),才能走的更遠(yuǎn)！</div>
<br>
<div id="div3">菜鳥教程(cainiaoplus.com) - 學(xué)好基礎(chǔ),才能走的更遠(yuǎn)！</div>
</body>
</html>測(cè)試看看 ?/?