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

悠悠 2021-09-16 01:04 556阅读 0赞

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

![SouthEast][]

html代码很简单，就一句：

然后我先说一下这个图是怎么得来的，上面和下面的线是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>

但是结果却是这样的：

![SouthEast 1][]

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

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

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

[SouthEast]: /images/20210813/4a43a58fd1c94a528eef32ad71ef0c18.png
[SouthEast 1]: /images/20210813/3d8db745be71456d868c746be6a7b177.png