CSS的var()函数怎么用?入门百科
CSS中的var()函数可用于插入自定义属性(有时称为“css变量”)的值,而不是插入其他属性值的任何部分。随着sass,less预编译的流行,css也随即推出了变量定义var函数。var()函数,就如同sass和less等预编译软件一样,可以定义变量并且进行对应的使用。
语法:
var( custom_property, value )
参数:
●custom_property:这是必需的参数。自定义属性的名称必须以两个破折号( – )开头。
●value:可选参数。自定义属性的回退值,用于自定义属性在使用的上下文中无效的情况。如果自定义属性无效,则使用它。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>var()函数</title>
<style>
:root {
--main-bg-color: pink;
}
/* 使用var()函数 */
.demo1 {
background-color: var(--main-bg-color);
padding:10px;
}
.demo2 {
background-color: var(--main-bg-color);
padding: 5px;
}
.demo3 {
background-color: var(--text-color, plum);
padding: 5px;
}
body {
text-align:center;
}
</style>
</head>
<body>
<h2>var()函数</h2>
<div class = "demo1">Hello</div><br>
<div class = "demo2">这是一段测试文本!</div> <br>
<div class = "demo3">这是一段测试文本!</div>
</body>
</html>