CSS中currentColor关键字的使用教程

一、currentColor-真正大隐于市者

实际上，之前“SVG图标颜色文字般继承与填充”一文就简单介绍过currentColor, 后来有同事问此关键字，说没见过。我意识到，应该好好大家宣扬currentColor一番。

currentColor顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”，例如：

1. .xxx { border: 1px solid currentColor; }   

没错!再说一遍，没错！就是这么一个长得很不和谐的单词就是CSS3中一个标准且重要且强大的关键字。

什么？你没见过！！孤陋寡闻了吧~~过来~~来嘛~~只告诉你一个人哦，鄙人其实……已经使用有一段时日了，超赞的！

没事没事，别慌，现在开始认识还来得急，也会让你爽滴！
二、currentColor的使用与表现

上面提到，currentColor表示“当前的标签所继承的文字颜色”。可能还有小伙伴一时半会没消化过来，炒两个简单板栗助消化，CSS代码如下：

1. img[src$='mm1.jpg'] { border: 1em solid currentColor; }  

于是，如果御用妹子直接暴露在本文中，妹子边框颜色就会是文章默认文字颜色，如下这样子：

我的鑫空间<pre>标签文字颜色是蓝色(pre { color: blue; })，于是，我把御用妹子放在<pre>标签中，则边框则是蓝色，如下：

注意：由于是CSS3新增关键字，需要IE9+以及其他现代浏览器才有效果。

换种方式表示就是：currentColor = color的值

用图示意是：

任意替换性
凡事需要使用颜色值的地方，都可以使用currentColor替换，比方说背景色 – background-color, 渐变色 – gradient, 盒阴影 – box-shadow, SVG的填充色 – fill等等。很灵活，很好用！

下面问题来了，我要让图片边框蓝色，直接：

1. border: 1em solid blue;  

不就好了，还要费尽周折弄个currentColor搞摩斯(武汉话，’干嘛’意思)啊？这活生生多了好多字节的大小啊！

这个想法其实短见了，当我们应用一些CSS高级技能，尤其CSS3图形技术的时候，你会发现，currentColor就是雾霾天气下的强劲冷空气，带来无比的清爽与洁净，下面一章节的栗子大家不妨好好感受下！
三、 currentColor的实战表演秀

实战1：背景色镂空技术
去年介绍过“CSS背景色镂空技术”，可以方便控制图标的颜色，很赞的想法。此文章对应demo可以轻戳这里访问。

这种设计的目的就是鼠标hover时候，图标可以跟着文字一起变色。如果不考虑兼容性问题，我们可以稍稍改造下，使其实现更加简单：

1. .icon {   
2.     display: inline-block;   
3.     width: 16px; height: 20px;   
4.     background-image: url(../201307/sprite_icons.png);   
5.     background-color: currentColor; /* 该颜色控制图标的颜色 */  
6. }  

于是，我们想要鼠标hover文字链接，其图标颜色要跟着一起变化，只要改变文字颜色就可以了：

1. .link:hover { color: #333; }/* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */  

HTML结构如下：

1. <a href="##" class="link"><i class="icon icon1"></i>返回</a>  

于是鼠标hover就是#333颜色图文合体变化：

您可以狠狠地点击这里：背景色镂空技术与currentColor demo

实战2：CSS3图标生成与hover控制
今天开春时候写过有一定反响的“CSS3图标图形生成技术个人攻略”一文，那个时候