一、线性渐变：background:linear-gradient(参数1，参数2，...)

1.第一个参数表示方向

    -例to right ：从左向右渐变

    to right bottom（to+结束边/结束的角）：从左上角到右下角渐变

    -兼容问题/写法：

        -从一个边到另一个边，不能加to，直接写开始的方向值

        -从一个边到另一个边，不能加to，直接写开始的角度值（xxdeg）

2.第二个表示颜色1

3.第三个表示颜色2

......最少两个，最多无数个

二、径向渐变：background：radial-gradient（参数）

1.第一个参数表示渐变的起点位置

    -默认在中心点

    -value（50px 50px）

    -方向值：top right bottom left

2.第二个参数表示渐变的形状

    -ellipse 椭圆 circle 圆（如果元素形状为正方形的元素，则ellipse和circle显示一样）

3.第三个参数表示渐变的大小

    -即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角；           farthest-corner：最远角。

4.第四个参数表示颜色值1

5.第五个参数表示颜色值2.......

    注：形状和大小有冲突的（写法上的错误），一定要设置的话两个参数之间用空格隔开

三、重复渐变：background：repeating-linear-gradient（百分比）

四、重复径向渐变：background：repeating-radial-gradient（参数）

五、过渡：transition（简写：transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型）

1.transition-property:

    -属性值：一般为all；

2.transition-duration:（过渡时间）

    -属性值：时间值；

3.transition-delay:（过渡延迟时间）

    -属性值：时间值；

4.transition-timing-function:（过渡的动画类型）

    -属性值：linear（匀速）；ease（逐渐慢下来：默认值）；ease-in（加速）

六、2D：transform

1.2D位移功能函数：transform：translate（参数）

    -参数可以有两个X，Y用逗号隔开，表示水平垂直方向的位置数值

    -translatex（）/translatey（）表示分别设置x和y的值

    -位移和相对定位一样不脱离文档流

    -应用：接百分比值可实现浏览器居中

2.2D缩放功能函数：transform：scale(参数)

    -两个参数（1.数字表示倍数（相同的倍数可以简写成一个））

    -scalex（）/scaley（）表示分别设置x和y的值

    -隐藏（值为0）；缩小（0~1）；默认（1）；放大（大于1）；先缩小再放大（小于0，但放大后内容旋转180度）

3.2D旋转功能函数：transform：rotate(参数)

    -只有一个参数（一般为度数：deg），正数：顺时针转；负数：逆时针转

    -默认z轴旋转

    -rotatex（）/rotatey（）表示分别设置x和y的值

4.2D倾斜功能函数：transform：skew(参数)

    -两个参数

    -skewx（）/skewy（）表示分别设置x和y的值

5.2D变形原点：transform-origin：值

    是该元素围绕着哪个点变形或旋转，该属性只有在设置了transform属性的时候起作用