1、线性渐变

background：linear-gradient（渐变的方向，颜色1，颜色2）

渐变的方向：

（1）单一方向渐变

标准模式：to bottom 从上到下渐变

兼容模式：bottom 从下到上渐变

（2）对角方向渐变

标准模式：to right bottom 从左上角到右下角 

兼容模式：right bottom 从右下角到左上角

（3）角度值

标准模式的角度值

正值：顺时针

负值：逆时针

兼容模式的角度值

90deg-标准的角度值

（4）例子：一个背景两个背景色

background：linear-gradient（to top，orange 50%，pink 50%）

2、径向渐变（只有兼容模式，必须加前缀）

background：-webkit-radial-gradient（渐变的中心点，渐变的形状，渐变的大小，开始颜色，结束颜色）

渐变的形状和渐变的大小只能存在一个

（1）渐变的中心点

（i）方向：center（默认值）

水平：left right center

垂直：top bottom center

（ii）像素：px：10px 40px（水平10px，垂直40px）

（iii）百分比：%

（2）渐变的形状（默认形状跟盒子有关，受盒子影响，正方形只能是正圆）

（i）圆：circle

（ii）椭圆：ellipse

（3）渐变的大小

closest-side：最近边

closest-corner：最近角

farthest-side：最远边

fathest-corner：最远角

3、重复线性渐变

background：repeating-line-gradient（to left， color1 百分比，color2 百分比，color3 百分比）

4、重复性径向渐变

background：-webkit-repeating-radial-gradient（color1 百分比，color2 百分比，color3 百分比）