1.背景的渐变
    1.线性渐变
    设置普通渐变 background：linear-gradient（颜色1，颜色2）
    设置渐变比例 background：linear-gradient（颜色1 %，颜色2 %）
    设置渐变方向 background：linear-gradient（to 方向的英文，颜色1，颜色2）
    设置对角渐变 background：linear-gradient（to 方向1 方向2，颜色1，颜色2）
    设置渐变角度 background：linear-gradient（*deg，颜色1，颜色2）
    如果渐变色的两个比例是一样的，就是明确分界线的两个颜色哦！

    2.径向渐变
    设置普通渐变 background：radial-gradient（颜色1，颜色2）
    设置渐变比例 background：radial-gradient（颜色1 %，颜色2 %）
    设置渐变图案 background：radial-gradient（circle，颜色1，颜色2）
    ellipse椭圆默认的，circle是正圆

    3.设置重复渐变
    设置重复线性渐变 background：repeating-linear-gradient（颜色 %，颜色2 %）
    设置重复径向渐变 background：repeating-radial-gradient（颜色 %，颜色2 %）
    注意：实现重复渐变必须设置比例！

    2.字体图标
    1.搜索iconfont,进入阿里矢量图标库，搜索想要的图标，加入购物车
    2.下载代码。
    3.按照demo_index.html的步骤使用即可。 【注意各种文件的路径！】

    1.     **自定义字体**<br />                @font-face{<br />                font-family:'自定义字体的名字';<br />                src:url(字体文件的路径);<br />            }<br />            使用的时候，记得设置字体类型为自定义的名字即可！

    3.过渡：让一个变化缓缓进行
    transition：过渡的属性1 执行的时间 延迟的时间 变化的曲线，过渡的属性2 执行的时间 延迟的时间 变化的曲线
    变化的曲线为匀速 linear
    注意：只有可用数字化的属性可以使用过渡 display不可用！

    4.变形
    1.位移：移动元素的位置
    transform：translate（x移动的值，y移动的值）
    transform：translateX（x）
    transform：translateY（y）
    transform：translateZ（z）
    transform：translate3d（x，y，z）

    2.缩放：缩小或者放大元素
    transform：scale（x变的倍数，y变的倍数）
    transform：scaleX（x）
    transform：scaleY（y）
    transform：scaleZ（z）
    transform：scale3d（x，y，z）

    3.旋转
    transform：rotate（deg）
    transform：rotateX（x）
    transform：rotateY（y）
    transform：rotateZ（z）
    transform：rotate3d（    deg，x，y，z） [后面两个参数设置0-1的小数]

    其他属性
    1.设置变形的基点
    transform-origin：x的坐标 y的坐标； [也可以是对应变形轴上的方向的英文]
    2.背面是否可见
    backface-visibility:hidden不可见 | visible可见