currentColor

说明:

在CSS1和CSS2中定义了border-color属性的默认值是color属性的值,但却没有为此定义一个相应的关键字。

这个问题在 SVG 中被意识到了,于是在 SVG 1.0 中引入了currentColor关键字。

在CSS3中扩展了颜色值包含currentColor关键字,并用于所有接受颜色的属性上。

currentColorcolor 属性的值,具体意思是指:currentColor关键字的使用值是color属性值的计算值。
  • 如果currentColor关键字被应用在color属性自身,则相当于是color: inherit
  • 上述这些话都是什么意思呢?先看个例子

    示例代码:

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

    如果你能立马知道上述代码的运行结果,那么就差不多理解 currentColor 关键字的意思了。

    上述代码将会让div拥有一个红色的边框,这就解释了 border-color 属性的默认值是 color 属性的值;

    如果将上述代码中的color属性定义删除,那么边框的颜色将取决于父元素的 color 计算值,因为 color 拥有继承性;

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-8.0 #1 2.0+ 4.0+ 4.0+ 3.5+ 3.2+ 2.1+ 18.0+
9.0+
  1. 不支持currentColor关键字,但支持以不定义该值的方式达到相同的效果;