CSS3中的扫地僧currentColor

发布时间:2018-12-19 作者:一点通


currentColor是CSS3中的一个颜色变量,表示当前元素中文字的颜色

什么意思呢?看看下面的代码

<div class="out">
    <div class="inner"></div>
</div>

加上下面的样式

.out{
    color: red
}
.inner{
    border: currentColor 1px solid;
    box-shadow: 0px 0px 10px currentColor;
    background-color: currentColor;
}

上面的inner中所有的颜色值均为red,因为inner继承了outcolor颜色值。

如果改成下面这样

.out{
    color: red
}
.inner{
    color: blue;
    border: currentColor 1px solid;
    box-shadow: 0px 0px 10px currentColor;
    background-color: currentColor;
}

那么inner中所有的颜色值就都变成了blue

所以,currentColor表示当前元素中文字的颜色(不管color是自己设置的还是继承自父级的),要深刻理解这句话的意思。

那么有同学会问,什么地方会用到这个变量呢?其实作为一个变量,currentColor主要是简化我们的代码。其中很实用的一个场景是SVG图标的颜色取值

<svg fill="currentColor">...</svg>
<svg stroke="currentColor">...</svg>

那么当我们在使用这个SVG的时候就能在它的父级元素上设置color来影响其fill或者stroke的颜色值了,非常方便

<a style="color: red">
    <svg fill="currentColor">...</svg>
</a>

上面的SVG图标的填充色就是红色了。你可以观察很多开源的SVG图标库,都能看到currentColor的身影

currentColor的浏览器支持为IE9+,基本上可以放心使用了