字体图标
优点：
1.灵活性：灵活地修改样式，例如：尺寸、颜色等
2.轻量级：体积小、渲染快、降低服务器请求次数
3.兼容性：几乎兼容所有主流浏览器
下载字体图标(https://www.iconfont.cn/)
步骤:
1.百度搜索iconfont
2.素材库或者搜索栏去搜索你想添加的字体图标
3.点击你想要添加的某个字体图标的购物车
4.点击右上角的购物车
5.选择添加至项目(没有项目的要新建项目)
6.下载至本地，解压文件，放在需要使用的文件夹的根目录
使用方法
一、unicode编码使用法
1.引入下载好的字体图标文件夹的iconfont.css
2.利用空标签(大部分都是用i标签)去承接unicode编码内容
3.声明字体图标库font-family：iconfont
二、class使用法
1.引入下载好的字体图标文件夹的iconfont.css
2.类名
第一个类名是固定的：iconfont;
三、搭配伪元素
1.引入下载好的字体图标文件夹的iconfont.css
2.声明字体图标库font-family：iconfont
3.content: "";填入unicode编码
平面转换
属性：transform（transform可以改变盒子的层级关系，提高盒子的层级）
一.平面转换transform: translate(水平移动距离, 垂直移动距离);
1.取值：
①像素单位数值
②百分比（自身取值的百分比，与父盒子无关）
2.技巧
①translate()如果只给出一个值, 表示x轴方向移动距离
②单独设置某个方向的移动距离：translateX() & translateY()
3.绝对定位居中
①父元素添加position: relative
②子元素添加position：absolute
二、旋转transform: rotate
语法：transform: rotate(角度);角度单位是deg
三、转换原点transform-origin
1.语法：
①默认圆点是盒子中心点
②transform-origin: 原点水平位置 原点垂直位置;
2.取值：
①方位名词（left、top、right、bottom、center）
②像素单位数值
③百分比（参照盒子自身尺寸计算）
四、多重转换
目标：使用transform复合属性实现多形态转换
语法：transform：translate（） rotate（）
注意点：属性之间用空格隔开，translate要写在前面，如果rotate写在前面会改变坐标轴向
五、缩放transform: scale
语法
①transform: scale(x轴缩放倍数, y轴缩放倍数);
②scale值大于1表示放大, scale值小于1表示缩小
渐变
使用background-image属性实现渐变背景效果
一般用于设置盒子的背景
1.语法：background-image: linear-gradient
2.用法
①默认的方位从上到下
②方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
③角度deg：直接写度数即可，不用再加to
遮罩层渐变的使用方法
①设置子绝父相
②background-image: linear-gradient(transparent,rgba(0, 0, 0, 0.0))
③opacity
