currentColor

版本：CSS3

currentColor是 color 属性的值，具体意思是指：currentColor关键字的使用值是 color 属性值的计算值。如果currentColor关键字。被应用在 color 属性自身，则相当于是 color: inherit。

浏览器支持

说明：

在CSS1和CSS2中定义了border-color属性的默认值是color属性的值，但却没有为此定义一个相应的关键字。这个问题在SVG中被意识到了，于是在SVG1.0中引入了currentColor关键字。在CSS3中扩展了颜色值包含currentColor关键字，并用于所有接受颜色的属性上。

• 如果currentColor关键字被应用在color属性自身，则相当于是color:inherit。

div{border:1px solid;color:red;}

如果你能立马知道上述代码的运行结果，那么就差不多理解currentColor关键字的意思了。上述代码将会让div拥有一个红色的边框，这就解释了border-color属性的默认值是color属性的值；如果将上述代码中的color属性定义删除，那么边框的颜色将取决于父元素的color计算值，因为color拥有继承性；

实例

currentColor是css3中扩展的关键字，具体意思就是使用该关键字的元素的（或其最近父元素）color属性的颜色值。如果currentColor关键字被应用在 color 属性自身，则相当于是 color: inherit。

该div有边框
. borderDiv{border:1px solid currentColor;color:red;}

浏览器上查看该html ,显示如下：

正如我们想的一样。接下来我们再次对它改造：

该div有边框
. borderDiv{border:1px solid currentColor;color:red;}
. parentDiv{color:green;}

浏览器上查看该html ,显示如下：

这个结果和上面的结果一样，看来border 中的currentColor还是遵循最近原则，应用了本身borderDiv class中的color值。通过这个测试，我们也是验证了只有color:currentColor,这个color属性应用currentColor时，等同于color:inherit;

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com