涨知识了：css 偷懒技能——currentColor

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天。

currentColor 介绍

currentColor 是 CSS3 中增加的一个颜色关键字，是 CSS 有史以来的第一个变量。 它借鉴自 SVG，这个关键字并没有绑定到一个固定的颜色值，而是解析为 color。

有网友解释为：CSS里你可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父级元素继承而来。

它可以应用于元素的 color、background-color、border 等属性中，也可以作用于 SVG 和 Canvas。

可能这样介绍，还是有些懵，下面来个例子来说明一下：

<div class="active">我是 currentColor</div>
---------------------------------------
<style>
.active{
    color:yellowgreen;
    border:1px solid currentColor;
    width:100px;
    padding: 5px 10px;
    text-align: center;
}
</style>

效果如图：

可见虽然我们并没有给边框设定具体的颜色，但是却渲染出了跟 color 一样的颜色，是不是很方便。

currentColor 妙用

借用 currentColor 的强大特性，我们还可以制作一些绚丽的样式。

背景色镂空技术

<a href="##" class="link"><i class="icon icon1"></i>返回</a>
<a href="##" class="link"><i class="icon icon1"></i>刷新</a>

<style>
  .icon {  
        display: inline-block;  
        width: 16px; height: 20px;  
        background-image: url(../201307/sprite_icons.png);  
        background-color: currentColor; /* 该颜色控制图标的颜色 */  
    }  
 .link:hover { color: #333; }/* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */
</style>

便捷写法

如果我们要控制子元素的边框颜色与父元素文字的颜色一致，就可以在子元素中设置：

border: 1px solid;

不写颜色值，我们同样可以得到预期的效果。

此外有一点需要注意：

上述对currentColor的讨论，都是基于未给当前元素设置color颜色值的情况下，如果上述案例中的子元素自身设置了color颜色值，那么currentColor值就会被替换为该子元素当前设置的color值。