CSS关键词的值-currentColor关键字(当前颜色)

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说明。