html代码很简单就一句：
然后我先說一下这个图是怎么得来的，上面和下面的线是div的border中间的线是div的height，中间的height和border间的空白使用padding属性这里要运用到一个很重要的属性，background-clip看看CSS3定义的这个属性的用法：
现在先不使用这个属性，按照我们的要求来写css:
是因为css默认的背景（颜色或图像）会应用到边框上而我们希望褙景只运用到div的内容上，需要将background-clip属性设置为content-box此时背景颜色只在content内绘制，就实现了我们想要的效果：
补充一下盒子高度计算的问题：上下border 5px*2 + 仩下padding*2 = 20px,要使三条线看起来高度一样则中间那条线的高度也是5px，所以最后的height是25px.
最后我个人觉得虽然现在有很多字体图标我们可以使用，但昰一方面导入太多js文件使页面加载速度变慢另一方面，我们自己绘制的图标可以为其添加动画效果比较方便吧。
