CSS的var()函数怎么用？

摘要：CSS中的var()函数可用于插入自定义属性（有时称为“css变量”）的值，而不是插入其他属性值的任何部分。随着sass，less预编译的流行，css也随即推出了变量定义var函数。var()函数，就如同sass和less等预编译软件一样，可以定义变量并且进行对应的使用。

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>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_7581