currentColor关键字
currentColor关键字相当于一个CSS变量。
currentColor关键字与CSS变量也是有区别的:
(1)他只可以能接受<color>值的地方使用。如果属性不接受<color>值,就不能接受currentColor值。
(2)不能用CSS变量的方法赋颜色值,currentColor值是根据当前原素的color属性值决定。相当于currentColor值与color值一样。
(说明:如果当前元素没有设置COLOR,那么它会继承父元素的COLOR值,如果所有的父元素没有设置COLOR值,多数浏览器默认把它设置为黑色。)
例:
div{color:red;}
.box{ box-shadow: inset 1px 1px 2px currentColor; background-color: currentColor; background-image: linear-gradient(currentColor, transparent);} <div> <div class=".box"></div> </div>
css变量
使用过Sass或LESS,说明您已在你的样式表中使用过变量了。
未使用,可以这样理解,CSS中的变量允许写更多DRY(Donot repeat youself 不要重复代码)。对于管理大型项目很管用。
例:网站中的颜色主题大量使用。
(1)CSS文件中,对于不同的属性,配色通常需要重复使用一些颜色值。如果想要改变某个主要颜色,就需要在样式表内所有使用了这个颜色的地方进行修改。
(2)CSS变量,在一个位置定义一个变量(如:定义个main-color变量),赋给它个颜色值。这个值使用允许样式表中的任何地方都可以使用。这样只要修改这个变量的值,只要模式表中使用这个变量的地方都会改变。
以上请自行理解,如不理解,请查阅其它currentColor说明。