利用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(背景被裁剪到内容框);