CSS var() 函数 详解
css3基础 2023-07-27 10:05:59小码哥的IT人生shichen
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);
}
完整实例【亲自试一试】：
<!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>
<h1>var() 函数</h1>
<div id="div1">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</div>
<br>
<div id="div2">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</div>
<br>
<div id="div3">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.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() 函数插入几个自定义属性值：
: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);
}
完整实例【亲自试一试】：
<!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>
<h1>var() 函数</h1>
<div id="div1">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</div>
<br>
<div id="div2">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</div>
<br>
<div id="div3">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
相关页面
CSS 教程：CSS 变量
