利用css绘制三条横线的菜单图标

  今天在慕课网上学习padding属性时，老师利用padding,border,backgroud-clip等属性轻易的使用一个div绘制出了三条横线的菜单图标，像下图这样

html代码很简单，就一句：

<span style="font-family:Comic Sans MS;font-size:14px;"><div class="menu-icon"></div></span>

然后我先说一下这个图是怎么得来的，上面和下面的线是div的border，中间的线是div的height，中间的height和border间的空白使用padding属性，这里要运用到一个很重要的属性，background-clip，看看CSS3定义的这个属性的用法：

规定背景的绘制区域:

background-clip: border-box(默认值，背景被裁剪到边框盒)|padding-box(背景被裁剪到内边距框)|content-box(背景被裁剪到内容框);

现在先不使用这个属性，按照我们的要求来写css:

<span style="font-family:Comic Sans MS;font-size:14px;">.menu-icon{
		width: 30px;
		height: 25px;
		border-top: 5px solid #DD575C;
		border-bottom: 5px solid #DD575C;
		background-color: #DD575C;
		padding: 5px 0;
	}</span>

但是结果却是这样的：

是因为css默认的背景（颜色或图像）会应用到边框上，而我们希望背景只运用到div的内容上，需要将background-clip属性设置为content-box，此时背景颜色只在content内绘制，就实现了我们想要的效果：

<span style="font-family:Comic Sans MS;font-size:14px;">.menu-icon{
		width: 30px;
		height: 25px;
		border-top: 5px solid #DD575C;
		border-bottom: 5px solid #DD575C;
		background-color: #DD575C;
		padding: 5px 0;
                background-clip:content-box;
 }</span>

补充一下盒子高度计算的问题：上下border 5px*2 + 上下padding*2 = 20px,要使三条线看起来高度一样，则中间那条线的高度也是5px，所以最后的height是25px.

最后，我个人觉得虽然现在有很多字体图标我们可以使用，但是一方面导入太多js文件使页面加载速度变慢，另一方面，我们自己绘制的图标可以为其添加动画效果，比较方便吧。