导读 摘要 今天小编跟大家讲解下有关CSS的var()函数怎么用 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS的var()函数怎么...
摘要 今天小编跟大家讲解下有关CSS的var()函数怎么用 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS的var()函数怎么用 今天小编跟大家讲解下有关CSS的var()函数怎么用 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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>来源：爱蒂网
版权声明：本文由用户上传，如有侵权请联系删除！