css横线_必看！用CSS命令绘制常用小图标，手把手教你操作

在web开发中&＃xff0c;我们经常要用到一些小图标(加减勾叉等)。通常做法就两种&＃xff1a;

1、直接使用图片&＃xff1b;

2、使用css/svg直接在浏览器中绘制图标&＃xff1b;

方案1

由于图标图片比较多&＃xff0c;而且体积很小&＃xff0c;为了减少请求&＃xff0c;我们需要用雪碧图将图标拼凑在同一张图片里面&＃xff0c;修改维护十分麻烦&＃xff01;

现在比较好的方案是使用webpack引入图片&＃xff0c;小图直接转换成base64插入css中。直接使用图片比较简单&＃xff0c;这也是目前比较主流的做法。

● 方案2

相比方案1&＃xff0c;明显可以减小资源的体积&＃xff0c;只需要几条css/svg命令就可以绘制出精美的图标&＃xff0c;而且不受图片尺寸限制&＃xff0c;可大可小非常灵活。

初看方案2的一堆代码可能会觉得非常难&＃xff0c;但其实很多简单的图标都是非常容易实现的。

接下来就是同学们最期待的小智手把手教学时间啦。

01 暂停按钮

02 加号按钮

.box{ width: 50px; height: 50px; background-color: white; border: 1px solid black; border-radius: 100%; outline: 10px solid black; outline-offset: -35px; cursor: pointer; }

03 关闭按钮

04 菜单按钮

用阴影实现

用背景裁剪实现

用渐变函数实现

05 文章图标

06 单选按钮

.box{ width:0; color: #000; border: 3px solid black; outline: 6px dotted ; outline-offset: 6px; }.box{ width:0; padding: 3px; background-color: black; outline: 6px dotted black; outline-offset: 6px; }.box{ height: 6px; width: 6px; background-color: black; outline: 6px dotted black; outline-offset: 6px; }

07 靶子图标

.box{ width: 0; color: #000; border: 8px solid transparent; border-top: 8px solid; box-shadow: 0 -12px 0 -4px; }

08 田字图标

.box{ width: 1px; height: 6px; color: #000; border: 8px solid transparent; border-top: 8px solid; box-shadow: 0 -12px 0 -4px; background: linear-gradient(to bottom,#ffffff 50%,#000000 50%) repeat-x; }

09 下载箭头

.box{ width: 0; color: #000; border: 8px solid transparent; border-top: 8px solid; box-shadow: 0 -12px 0 -4px; }

10 下载箭头(带横线)

.box{ width: 1px; height: 6px; color: #000; border: 8px solid transparent; border-top: 8px solid; box-shadow: 0 -12px 0 -4px; background: linear-gradient(to bottom,#ffffff 50%,#000000 50%) repeat-x; }

11 禁用图标

.box{ width: 20px; height: 20px; border-radius: 100%; border: 2px solid #000000; background: linear-gradient(to right,#ffffff 45%,#000000 45%,#000 55%,#fff 55%); transform:rotate(40deg); }