一 字体图标
字体图标展示的是图标，本质是字体，用来处理简单的、颜色单一的图片。
字体图标的优点：
1. 灵活性：灵活地修改样式，例如：尺寸、颜色等
2. 轻量级：体积小、渲染快、降低服务器请求次数
3. 兼容性：几乎兼容所有主流浏览器
4. 使用方便：下载字体包，通过编写一些代码就可以直接使用字体图标
常用的图标库链接：Iconfont：www.iconfont.cn/
字体图标的下载：（把下载好的整个文件夹解压改名为iconfont，然后放进项目根目录中）
字体图标的使用有四种方式：
- 使用Unicode编码
- 使用类名
- 上传svg
- 使用在线链接
1 使用字体图标-Unicode编码
引入样式表：iconfont.css (注意路径)
复制粘贴图标对应的Unicode编码
通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来
<i></i>
设置文字字体
2. 使用字体图标-类名
引入样式表：iconfont.css (注意路径)
调用图标对应的类名，至少必须调用2个类名---（可以在最后面再加一个类名，用于控制该图标的具体样式）
iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名
3. 使用字体图标-上传svg（矢量图）
思考：如果图标库没有项目所需的图标怎么办？
答：IconFont网站上传矢量图生成字体图标
-
与设计师沟通，得到SVG矢量图
-
IconFont网站上传图标，下载使用
上传矢量图：
l 上传 → 上传SVG图标
l 浏览本地图标 → 去除颜色提交
l 加入购物车 → 下载使用
4. 使用字体图标-在线链接
好处：字体图标库新添加的图标可以直接通过调用类名使用，不用再下载文件夹到本地。
坏处：要新建一个网址链接。
案例：通过搭配伪元素实现购物车案例
二 平面转换
平面转换属性：transform （translate位移 rotate旋转 scale缩放）
transform属性对行内元素是无效的, 添加transform属性的盒子可以提高盒子的层级，保留原来的位置，相当于相对定位
转换坐标轴的图
translate的使用语法：
rotate的使用语法：
转换原点--transform-origin：
多重转换----使用transform复合属性实现多形态转换
多重转换时，transform属性要连写，不能分开写，分开写会覆盖。
不能写成
transform：translate（600px）;
transform: rotate (360deg);
scale的使用语法：
scale只写一个值的时候，表示元素的宽高等比例缩放。
scale（1）表示元素不变。
三 渐变
使用background-image属性实现渐变背景效果
背景颜色渐变 bgi background-image: linear-gradient(参数1, 参数2, 参数3, ....);
-
参数1：方位：默认的方位从上到下
1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom 2.角度deg：直接写度数即可，不用再加to -
参数2：颜色1；
-
参数3：颜色2；.....
background-image: linear-gradient(to right bottom, green, blue); background-image: linear-gradient(red, yellow);
