currentColor-CSS3非常有用的变量
一、currentColor-简介
currentColor顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”，例如：
.xxx { border: 1px solid currentColor; }
二、currentColor的使用与表现
上面提到，currentColor表示“当前的标签所继承的文字颜色”。可能一下子蒙圈了，还是上代码的好，CSS代码如下：
于是，文本边框颜色就会是文章文字颜色，如下这样子：
（我把边框改成3px了，上面的代码也就没改，知道就行啦。。。）
注意：由于是CSS3新增关键字，需要IE9+以及其他现代浏览器才有效果。
换种方式表示就是：currentColor = color的值
用图示意是：
任意替换性
凡事需要使用颜色值的地方，都可以使用currentColor替换，比方说背景色 – background-color, 渐变色 – gradient, 盒阴影 – box-shadow, SVG的填充色 – fill等等。很灵活，很好用！
下面问题来了，我要让图片边框蓝色，直接：
border: 1em solid blue;
不就好了，还要费尽周折弄个currentColor搞摩斯(武汉话，’干嘛’意思)啊？这活生生多了好多字节的大小啊！
这个想法其实短见了，当我们应用一些CSS高级技能，尤其CSS3图形技术的时候，你会发现，currentColor就是雾霾天气下的强劲冷空气，带来无比的清爽与洁净，下面一章节的栗子大家不妨好好感受下！
三、 currentColor的实战表演秀
实战1：背景色镂空技术
这种设计的目的就是鼠标hover时候，图标可以跟着文字一起变色。如果不考虑兼容性问题，我们可以稍稍改造下，使其实现更加简单：
.icon {
display: inline-block;
width: 16px; height: 20px;
background-image: url(../201307/sprite_icons.png);
background-color: currentColor; /* 该颜色控制图标的颜色 */
}
于是，我们想要鼠标hover文字链接，其图标颜色要跟着一起变化，只要改变文字颜色就可以了：
.link:hover { color: #333; }/* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */
HTML结构如下：
<a href="##" class="link"><i class="icon icon1"></i>返回</a>
于是鼠标hover就是#333颜色图文合体变化：
您可以狠狠地点击这里：背景色镂空技术与currentColor demo
实战2：CSS3图标生成与hover控制
所谓CSS3图标生成，就是图标完全由CSS3特性代码组合合成。由于多半跟链接文字混用，因此，有个交互效果就是：hover文字的时候，图标的颜色也要跟着变化。我一开始使用的是定值颜色，为了hover时候颜色控制方便，就大肆使用border属性构建图形，虽然效果也有，但HTML和CSS都啰嗦了点。借助currentColor, hover时候的颜色变化，我们根本无需关心，因为无论是border, background, 还是box-shadow都使用currentColor作为图形颜色，hover时候自然就会变成我们想要的文字颜色。
具体每个图标代码也简化了，拿平铺图标举例，9个点：
之前为了hover方便，使用border实现，于是5个元素上阵才模拟出来的，代码熙熙攘攘如下：
.ico-repeat::before,
.ico-repeat::after,
.ico-repeat z { width: 3px; height: 7px; border-top: 3px solid #777; border-bottom: 3px solid #777; top: 5px; left: 3px; }
.ico-repeat::before { left: 3px; }
.ico-repeat::after { left: 13px; }
.ico-repeat z { left: 8px; }
.ico-repeat z::before { width: 7px; height: 3px; border-left: 3px solid #777; border-right: 3px solid #777; top: 2px; left: -5px; }
.ico-repeat z::after { width: 3px; border-top: 3px solid #777; top: 2px; }
使用currentColor我们可以摆脱实现方式的限制，例如，我们可以使用box-shadow + currentColor, 只要一个元素就可以了。
.ico-repeat::before { width: 3px; height: 3px; background-color: currentColor; box-shadow: 0 5px currentColor, 5px 0 currentColor, 5px 5px currentColor, 10px 0 currentColor, 0 10px currentColor, 5px 10px currentColor, 10px 5px currentColor, 10px 10px currentColor; top: 5px; left: 3px; }
HTML方便也没有必要再内嵌一个<z>元素，直接如下就可以了：
<a href="javascript:" class="ico-a"><i class="ico ico-repeat"></i>平铺</a>
鼠标hover效果依然杠杠的，如下：
其他很多图标也可以做类似的优化，例如列表图标可以放心使用background-color + border + background-clip单标签三边框生成技术，于是，只要两个元素就足够了，而之前至少要四个。
首先，border和box-shadow默认的颜色就是当前的文字颜色，也就是类似currentColor；
其次，在iOS Safari浏览器下(iOS8)下，currentColor还是有一些bug的，例如伪元素hover时候，background:currentColor的背景色不会跟着变化，怎么办呢？等升级，或者使用border来模拟。由于发现这个问题有一些时日，我有没有时间及时记录，因此，一些细节我也记不清楚了。
