currentColor

Created: November-22, 2018

currentColor 返回当前元素的计算颜色值。

使用相同的元素

由于 color 属性设置为 red，因此 currentColor 的计算结果为红色：

div {
   color: red;     
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor;
}

在这种情况下，为边框指定 currentColor 很可能是多余的，因为省略它应该产生相同的结果。如果由于更具体的选择器而被覆盖，则仅在同一元素内的 border 属性内使用 currentColor。

由于它是计算颜色，因此在下面的示例中边框将为绿色，因为第二个规则会覆盖第一个：

div {
   color: blue;
   border: 3px solid currentColor; 
   color: green;
}

继承父级的颜色，此处 currentColor 的计算结果为蓝色，使子元素的边框颜色为蓝色。

.parent-class {
    color: blue;
}

.parent-class .child-class {
    border-color: currentColor;
}

currentColor 也可以被其他通常不会从 color 属性继承的规则使用，例如 background-color。下面的示例显示了使用父级中的颜色集作为其背景的子项：

.parent-class {
    color: blue;
}

.parent-class .child-class {
    background-color: currentColor;
}