currentColor与CSS自定义属性之间的差异

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

变量对于CSS而言是这两年大家关注的一个话题。对于变量而言,最早是出于CSS的一些处理器语言当中,比如Sass、LESS之类的。随着CSS的发展,变量的概念也被引入到CSS中。时至今日,在CSS中的变量不被称作变量,而被称为CSS自定义属性。该特性让我们维护CSS、编写CSS变得更易。而事实上呢?在CSS最早的变量之一是currentColor。该特性也可以更好的帮助我们编写CSS和扩展CSS。那么今天我们来开另一个话题,currentColor和CSS自定义属性又有何差异呢?接下来的内容,我们就来一起探讨这方面的细节。

currentColor和自定义属性之间还是存在一些有趣的区别。这两个都是CSS中动态属性的例子,但是它们的解析方式在一些非常重要的方面还是有所不同的。至于为何不同,接下来的内容将向大家揭开。

currentColor

简单的回忆一下CSS中的变量关键词currentColor。这个关键词就像是一个CSS变量,不同的是它有一个主要的限制:

只可以在接受<color>值的地方使用它;如果该属性不能接受<color>值,它就不能接受currentColor作为值。

在CSS中,能接受<color>值的属性比较多,比如border-colorbackground-colorbox-shadowtext-shadowoutline以及CSS渐变属性等。如果我们希望元素的边框、阴影、背景等颜色和color同步,那么我们就可以使用currentColor。比如:

box-shadow: inset 2px 2px 3px currentColor;
background-color: currentColor;
border-color: currentColor;
background-image: linear-gradient(to bottom, currentColor, rgba(0,0,0,0));

当然,currentColor和其它变量之间的另一个区别是,你没办法用给其它变量赋值的方法给它赋值。currentColor的值是由当前元素使用的color属性的计算值决定的。比如下图所录制的效果:

正如上图所示,在currentColor变量的帮助下,改为color属性的值,所有继承了color的UI组件的颜色也会随着改变。

有关于currentColor更详细的介绍,可以阅读早前整理的《

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/currentcolor-vs-custom-properties.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部