纯CSS图标之菜单图标

一般在写网页的时候会遇到一些小图标，通常一些复杂的图标我们可以选择使用第三方图标库，但是一些比较简单的小图标，像这种（如下图）：

小图标就可以不用引入第三方图标库，通过CSS就可以轻易实现啦~ 那么我们一起来看一下怎么实现的。

其实这个图标可以使用border边框这个属性实现的，不同的border-style会展现不同的小图标。这个图标可以使用边框中double（双线）和solid（实线）这两个属性值来实现，我们来分析一下这个图标：

上半部分可以使用double这个值，边框double（双线）中两根线及中间的距离可以写成等分的，比如写的双线宽度是9px，上半部分的第一根线分得3px，中间距离分得3px，第二根线分得3px。下班部分可以使用solid这个值，小图标上这三根线的宽度是一样的，所以写的宽度要跟double双线等分的值是一致，第二根线和第三根线中间的空隙可以通过高度实现，代码如下：

<!-- HTML结构 -->
<div class="menu"></div>

/* CSS修饰 */
.menu{
	border-top: double 9px #000;
	border-bottom: solid 3px #000; 
	height: 3px;
	width: 18px;  /* 设置小图标的大小 */
}

咱们除了可以通过标签实现，也可以通过伪元素实现，代码如下：

<!-- HTML结构 -->
<div class="menu"></div>

/* CSS修饰 */
.menu:after{
	content:'';
	display: block;
	border-top: double 9px #000;
	border-bottom: solid 3px #000;
	height: 3px;
	width: 18px;
}

好了，以上就是咱们使用CSS写的小图标。