当前第2页 返回上一页
当多次声明自定义属性时，标准规则有助于解决冲突，样式表中最后定义的会覆盖上面定义的。
下面的示例演示了用户动态操作改变属性是多么容易，同时仍然保持代码清晰简洁。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .container{background: #fff;padding: 20px;}
p{transition: 0.4s;}
.title{font-weight: bold;}
.blue-container{
--title-text: 18px;
--main-text: 14px;
}
.blue-container:hover{
--title-text: 24px;
--main-text: 16px;
}
.green-container:hover{
--title-text: 30px;
--main-text: 18px;
}
.title{
font-size: var(--title-text);
}
.content{
font-size: var(--main-text);
}
|
1 2 3 4 5 6 7 8 | <div class="blue-container">
<div class="green-container">
<div class="container">
<p class="title">这是个标题</p>
<p class="content">将鼠标悬停在不同的颜色区域上可以更改此文本和标题的大小。</p>
</div>
</div>
</div>
|
1 2 3 | [示例地址](https://codepen.io/w3cbest/pen/OrxLLE)
正如您所看到的，CSS变量非常简单易用，开发人员不必花费太多时间在各处开始应用它们。以下是扩展内容：
var()函数有两个参数，如果自定义属性失败，它可用于提供回退值：
|
1 | width``: var(?Ccustom-width, 20%``);
|
可以嵌套自定义属性：
1 2 | * ?Cbase-color: #f93ce9;
* ?Cbackground-gradient: linear-gradient(to top, var(?Cbase-color), #444);
|
变量可以与CSS的另一个新增功能- calc() 函数结合使用。
1 2 | * ?Ccontainer-width: 1000px;
* max-width: calc(var(?Ccontainer-width) / 2);
|
以上就是CSS变量 var()的用法是什么？CSS变量 var()的用法详解的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css变量 var()的用法是什么？css变量 var()的用法详解
vue使用css变量实现切换主题功能
更多相关阅读请进入《css变量》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » CSS变量 var()的用法是什么？CSS变量 var()的用法详解
