CSS currentColor 属性值

currentColor 关键字表示当前元素设置的或者继承来的 color 属性的颜色值，可以用到任意属性值为颜色的地方。

这样说有点抽象，下面直接看几个例子，本文所有示例都在文章末尾：

currentColor 可以设置为颜色的属性值

下面是一个设置边框，阴影颜色和文字颜色一样的例子：

.example1 {
  color: red;
  border: 1px solid currentColor;
}

.example2 {
  color: red;
  box-shadow: 0 0 2px currentColor;
}

currentColor 也可以使用到伪类和伪元素

如下，currentColor 对于伪元素也生效：

.example3 {
  color: red;
}

.example3::after {
  content: '';
  display: inline-block;
  border: 4px solid transparent;
  border-left-color: currentColor
}

结合其他伪类，可以很方便的设置一些特殊的效果，比如下面是 .example3 的三角形随着 hover 状态改变的例子：

/* 使用了 currentColor */
.example3:hover {
  color: green;
}

/* 不使用 currentColor */
.example3:hover {
  color: green;
}

.example3:hover::after {
  border-left-color: green;
}

从上面例子可以看出，使用 currentColor 代码精简了很多，特别是党当还有更多的伪类如 :hover、 :visited、 :focus、 :active 等存在时，可以节省更多的重复代码。

上述示例在线代码：

See the Pen OJbyaxM by tcatche (@tcatche) on CodePen.

caniuse

• caniuse currentColor

基本上主流浏览器都支持了这个属性，可以放心使用。