一个标签的72变，打造一个纯CSS图标库

每次要用到图标的时候都会到 icono 去copypaste，但每次用到的时候尺寸都各不一样，总是要调整参数，巨烦。当然你可以会想到用zoom、scale来做缩放，但是这样的缩放会使得线宽也变粗了，不甚满意。

终于下定心思来改造一个可缩放的图标库。github先上：https://github.com/qieguo2016/iconoo，目前提供下载link标签引入和npm+webpack的引入方式，详见项目的readme。（喂，来个star！）。上图：

.icon-test {
display: inline-block;
position: relative;
box-sizing: border-box;
color: #2ba5bb;
width: 60px;
height: 40px;
border-top-width: 0;
border-right-width: 0;
border: 4px solid;
border-color: transparent;
box-shadow: -4px 5px;
overflow: hidden;
}

.icon-test:before,.icon-test:after {
content: '';
pointer-events: none;
position: absolute;
}

.icon-test:before {
left: 0;
bottom: 8px;
border: 14px solid transparent;
border-bottom-color: currentColor;
box-shadow: 0 16px;
}

.icon-test:after {
left: 28px;
bottom: 9px;
border-width: 0 9px 21px;
border-style: solid;
border-color: transparent transparent currentColor;
box-shadow: 0 17px;
}

View Code
[b]怎么样？觉得这些都是小玩意？好吧，都让开，我要开始装逼了！

蒙娜丽莎？什么鬼？我会告诉你这也是一个单标签纯CSS画出来的吗？

几千条box-shadow构成的蒙娜丽莎，看的我内分泌都失调了。。。

(author：Jay Salvat， 来源：http://codepen.io/jaysalvat/pen/HaqBf )

如此变态的绘图，都没有怎么用到CSS中最强大的变形，如果加入变形，那可以画出来的形状就更多了。。。更多CSS玩意儿，请到codepen上去探宝吧！

PS： 蒙娜丽莎这种图形，可以读取原图信息转换成单位面积的box-shadow，前端用canvas就可以做的，其实这货的技术含量比一个图片图标还要少呢。话虽如此，复杂图形使用CSS来绘制的话，性价比还是太低，建议还是使用图片，这样会更具表现力一些，操作起来也更加简单！专业的绘图还是交给专业的UI去做吧！

大大小小的坑

其实，遇到的这些都不能叫做坑，是自己对CSS的理解度不够而已。原以为，将原来icono使用的单位换算成em就算完事了，然而，一改font-size就变形了，顿时懵逼！究其原因，其实也很简单，并不是所有地方与font-size都是正比的，很多地方混入了线宽的影响，所以要剔除线宽的影响。

去除线宽影响的方法不外乎两种：

1）去掉线宽，例如使用box-shadow等不影响尺寸的属性

2）将线宽纳入计算内，比如translate反向偏移掉线宽，这样整体缩放就不会受到线宽的影响了。

另外一个比较烦的就是居中，其实居中基本上就只用到了下面两种方式，还是蛮简单的。只是，这个反复的copypaste，烦哪！

1. 绝对定位+margin：auto。

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

实现原理：利用css定位规则，设置左右、上下方向定位为0，margin为auto，让css根据定位计算margin值，用hack的方式实现居中。居中块的尺寸需要可控,因为css计算margin时也需要参考尺寸值，由于四周为0，所以自动计算得到的盒子尺寸(含margin)是与父容器一样的。无论是设置居中块的width、height或者是max-height、max-width，都是让尺寸不会扩大到与父级一样。

局限：在参考系父级(position!=static)大小比本身要小的时候，水平方向的居中就会失效。（垂直方向依然居中）

2. 绝对定位 + transform反向偏移。

position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
margin: auto;

实现原理：先绝对定位相对父级偏移50%，然后使用transform来反向偏移。由于transform的计算基准是元素本身，所以这里可以用50%来做反向偏移。

[b]局限：这个方案需要固定居中块的尺寸值（不能设置max-width等范围限制），浏览器需要以此为基准来计算定位！[/b]

综合来说，方案2的居中方式明显会比方案1要好，但是在绘制图标的时候会用到transform来做一些偏移，为了不覆盖偏移效果所以要用到方案的方式来做居中。除了这两种居中方式，还有inline-block对齐after/before子元素的方式，还有table和flexbox的方式来实现居中，但是画图标本身层级有限而且也用到了before/after，所以不适用图标绘制。

最后一点

目前纯CSS的图标还是挺多应用场景的，这种图标的方案免去了做雪碧图和维护雪碧图的麻烦，而且减少了图片资源的请求，从性能上来说会有那么0.01s的提高吧。不用堆雪碧图还方便调整颜色，性能还有0.01s的优化，这套CSS图标你还不赶紧用起来？！

PS：各位看官觉得不错的话，还请顺手给个github星星哈。多攥几颗星星，说不定就升职加薪赢取白富美了呢~~~

PPS：再附上几个神级的CSS效果吧(by Fabrizio Bianchi 来源： http://codepen.io/fbrz/pen/iqtlk)：