css3 拓展关键字 currentColor 详解与应用

发表于 | 分类于 | 阅读次数:

前言

最近读文章读到一个被我忽略的知识点，border 的颜色默认值是其字体 color 值。突然发现每天都要打交道的老伙计居然还有这隐藏特性，估计是一般 border 的颜色跟字体颜色不同，直接被我忽略了这个特性。惭愧啊，学艺不精。不过现在知道也不晚，好知识要的就是积累。言归正传，开始记录新知识点，css3 的拓展关键字 currentColor。这个知识点是阅读 张鑫旭大神的《currentColor-CSS3超高校级好用CSS变量》这篇文章时知道的，大神的博客风格幽默诙谐，品质上佳。这篇文章发表于2014年，距离现在有四年的时间了，按时间算也是个老知识点了，但是对我来说还很新很新。

详解含义

currentColor 的解释是：使用该关键字的元素的（或其最近父元素）color 属性的颜色值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
  .warp{
    color: #f90;
  }
  /* 此时，currentColor 等于 .wrap 元素的 color 属性值 */
  .warp p{
    color: #fff;
    background-color: currentColor;
  }
</style>

<div class="warp">
  <p>我是一行文字</p>
</div>

应用

这个关键字的应用简直就是赞到家！

比如在 hover 时，就可以只改变字体颜色而其他子元素的背景色、边框色、等支持 currentColor 关键字的属性颜色也会随着改变，让我们解放一部分繁琐的代码。

或者在需要牵连甚多复杂的变化效果时，也能体现 currentColor 的应用价值。

另外 border、box-shadow、background 及 background-image: linear-gradient(to bottom, currentColor, #fff) 渐变色、svg 中的 fill: currentColor 等。这些属性都可以应用 currentColor 关键字。另外：border:2px solid ; box-shadow:2px 2px;这种写法在所有浏览器上（包括IE6）也是没有问题的，默认的颜色值就是 color 的值。

“图形跟随文字颜色状态同时变化，达到了「图文合一」的境界” – 引言自 张鑫旭大神的《currentColor-CSS3超高校级好用CSS变量》这篇文章。

兼容

  • ie: 9+
  • edge: 12+
  • firefox: 2+
  • chrome: 4+
  • safar: 4+
  • opera: 10+
  • iOS safar: 4+
  • Android browse: 2.1+

在iOS Safari浏览器下(iOS8)下，currentColor还是有一些bug的，例如伪元素hover时候，background:currentColor的背景色不会跟着变化