利用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文件使页面加载速度变慢，另一方面，我们自己绘制的图标可以为其添加动画效果，比较方便吧。

利用css绘制三条横线的菜单图标相关推荐

html按钮上的三个横线,html+css实现三条横线点击变叉导航菜单
使用html+css实现三条横线的菜单按钮,点击弹出列表菜单,菜单按钮变叉,点击叉按钮或点击列表项收回菜单: 点击按钮: 点击叉按钮或者菜单列表项都可以收回菜单. css代码: .inner-head ...
[html] 请使用一个div写出有三条横线的小图标
[html] 请使用一个div写出有三条横线的小图标 #menu{ width: 25px; height: 3px; border-top: 3px solid #0; border-bottom: ...
canvas线条背景(抽象画布可视化，利用canvas绘制多条线条，再利用多条线条同时动态发生改变，形成一幅美妙的动态图，非常惊艳！)
canvas线条背景(抽象画布可视化,利用canvas绘制多条线条,再利用多条线条同时动态发生改变,形成一幅美妙的动态图,非常惊艳!) 动态变化中的静态截图 <!doctype html> ...
css三角形三条边全攻略
之前写过一篇文章,叫做css三角形四条边全攻略 css三角形四条边全攻略同时遇到了些问题,有些朋友问我能不能出一个三条边的攻略,毕竟现在主流的都是用三条边画三角形. 仔细想想,也对,所以今天我出一个 ...
html菜单三条横线,Word上怎么制作就三条横线的表格？
回答: 一.在Word表格中点击要画斜线的最左上角的单元格,选择菜单工具栏中的"表格"点击,找到"绘制斜线表头"选项,点击.如图: 二.点击后出现了" ...
利用CSS的三列等高布局
以前自己都是用JS去处理,原来用CSS也是很方便的,可以少写代码^_^ <html xmlns="http://www.w3.org/1999/xhtml"><h ...
利用CSS绘制精灵图
素材: 主要用到的工具和CSS属性: 绘制精灵图主要用到的是background-position属性,然后利用PS测量数据.background-position属性值主要见下图: 利用PS测量距离 ...
c语言图形学画扇形代码,利用CSS绘制任意角度的扇形示例代码
前言扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果效果图示例代码: 扇形绘制 } .sx1{ position: absolut ...
Qt利用openGL绘制三棱锥
直接上代码: Pro中添加QT += core gui openglwin32:LIBS+=-lOpengl32\-lglu32 \-lglutmainwindow.h中添加:#include < ...

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

利用css绘制三条横线的菜单图标相关推荐

最新文章

热门文章