整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
web开发中，我们经常要用到一些小图标（加减勾叉等）。通常做法就两种：
1、直接使用图片；
2、使用css/svg直接在浏览器中绘制图标；
方案1
由于图标图片比较多，而且体积很小，为了减少请求，我们需要用雪碧图将图标拼凑在同一张图片里面，修改维护十分麻烦！
现在比较好的方案是使用webpack引入图片，小图直接转换成base64插入css中。直接使用图片比较简单，这也是目前比较主流的做法。
● 方案2
相比方案1，明显可以减小资源的体积，只需要几条css/svg命令就可以绘制出精美的图标，而且不受图片尺寸限制，可大可小非常灵活。
初看方案2的一堆代码可能会觉得非常难，但其实很多简单的图标都是非常容易实现的。
接下来就是同学们最期待的小智手把手教学时间啦。
01 暂停按钮
<style>
.box{
width: 50px;
height: 50px;
background-color: black;
border: 1px solid white;
border-radius: 100%;
outline: 15px solid white;
outline-offset: -39px;
cursor: pointer;
transform: rotate(45deg);
}
</style>
<body>
<div class="box"></div>
</body>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;
}
</style>
<body>
<div class="box"></div>
</body>03 关闭按钮
<style>
.box{
width: 30px;
height: 0;
color: black;
box-shadow: 20px 10px 0 3px ,20px 0 0 3px ,20px 20px 0 3px;
}
</style>
<body>
<div class="box"></div>
</body>04 菜单按钮
用阴影实现
<style>
.box{
width: 30px;
height: 15px;
background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
outline: 1px solid black;
outline-offset: 4px;
}
</style>
<body>
<div class="box"></div>
</body>用背景裁剪实现
<style>
.box{
width: 30px;
height: 5px;
padding: 5px 0;
border-top: 5px solid black;
border-bottom: 5px solid black;
background-clip: content-box;
background-color: black;
}
</style>
<body>
<div class="box"></div>
</body>用渐变函数实现
<style>
.box{
width: 30px;
height: 15px;
background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
}
</style>
<body>
<div class="box"></div>
</body>05 文章图标
<style>
.box{
width: 16px;
height: 16px;
background-color: black;
border-radius: 100%;
box-shadow: 0 0 0 3px #fff,0 0 0 5px #000;
outline: 18px solid #ffffff;
outline-offset: -25px;
transform: scale(1.5);
}
</style>
<body>
<div class="box"></div>
</body>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 禁用图标
在进行前端开发时，图标库的使用是一项必须掌握的技巧，目前流行的图标库有fontawesome，iconfont等，只需要引入到项目中，然后使用对应的class，就会得到对应的图标。
但是你们有没有想过，如果是自己的话该怎么去实现这些图标呢？今天我们就来看看一些稍微复杂的图标是如何使用纯CSS3实现吧。
文中的代码已经放到github上了，感兴趣的同学自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure.html
CSS3
我们可以先来看看稍微复杂的图标的样子。
图标库
从图标中可以看出，都是平时很常用的正确，错误，方向键，放大，缩小，开锁，解锁等。
我们从中抽取几个，慢慢分析它们是如何实现的吧。
水杯的图标如下所示。
水杯图标
我们对水杯图标进行拆分，分为杯身和杯柄两个部分。
杯身中的白色长方形就是一个div，设置宽度和高度。
杯身的四周为黑色都是通过border实现，border-bottom比其他三个放向都要大。
杯身的下方是圆角，通过border-radius设置，border-radius的右下和左下方向设置相同的值。
通过上述的分析，我们可以得到杯身部分的CSS代码。
杯身CSS代码
杯柄通过伪元素:before实现。
杯柄设置为绝对定位，修改right值让中间出现一个空白。
调整杯柄位置的宽度，只需要和杯身重叠即可。
杯柄右上角和右下角的border-radius设置为特定的值，展现成圆角的样子。
通过以上的分析，我们可以得到杯柄部分的CSS代码。
杯柄CSS代码
首先我们来看看心形图案的样子。
心形图案
接下来我们同样将整个图案拆分来看，分成左右两个部分，我们将上述图案换成两种不同颜色就一目了然了。
拆分图案
从图案中可以看出，它实际是由两个相同的图行旋转不同的角度构成，相同的元素部分，可以通过设置border-radius值来实现。
我们将左右两个半边的形状分别通过:before和:after来实现，原始的的div形状的CSS属性则很简单，只需要设置相对位置和宽度为0即可。
基本CSS属性
然后看看:before和:after共有的属性，主要是保证为元素部分的定位为绝对定位，然后设置border-radius的值， 保证上半部分是圆角。
共有CSS属性
然后是关键的两半边各自的CSS属性。左侧的图形距左边应该为0，所以left: 0，右侧的图形距右侧为0，所以right: 0。
各有的CSS属性
同时左右两侧图案需要进行旋转，这里我们选择旋转48度，这是为什么呢？
很多人一下子可能会想到旋转45度，我们来看看旋转45度时的样子。
旋转45度
从图形中可以看出，两侧有棱角，整个图案就显得不标准，当旋转超过45度时，棱角的部分就会被里面的图案遮住。
所以这里我们选择旋转48度，达到最终的效果。
最终效果图
今天这篇文章我们使用纯CSS3的属性画出了一个杯子和心形两个稍微复杂点的图案，其实其它图案也是类似的，只要我们能将其拆分，每个部分独立实现，再组合就可以达到图标库的效果了。
大家也可以自己动手实现一下噢~
片格式分类
图片格式
位图图片: bmp、jpg、gif、png
矢量图图片: 以svg格式为代表, 可缩放矢量图形(ScalabelVector Graphics)。 SVG是一种使用XML格式定义的图像。
什么是传统方式的图标
图标采用图片格式, 有bmp、jpg、gif、png等文件格式
大小改变后, 可能会出现锯齿效果, 影响美观
什么是字体图标
图标全部字体格式
可以使用color、font-size..., 改变图标的颜色、大小等样式
利用CSS雪碧图处理图标
该技术的全称是: CSS Sprite, 又称css雪碧图
使用font+html实现字体图标的优缺点
优点: 轻量性、灵活性、兼容性好, 是目前被广泛使用的技术
缺点: 大多数的图标字体只能被渲染成单色
什么是svg格式?
它的英文全称为 Scalabel Vector Graphics, 意思为可缩放的矢量图形。
svg矢量图库官网有哪些?
阿里巴巴矢量图标库官网: http://www.iconfont.cn
icommoon图标库官网: https://icomoon.io/app/#/select
*请认真填写需求信息，我们会在24小时内与您取得联系。
