一.线性渐变（Linear Gradients）

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

2.方向direction :向下/向上/向左/向右/对角方向,默认方向为从上至下

①向下线性渐变(默认)

background:linear-gradient(pink,DeepSkyBlue);

②向上线性渐变

background:linear-gradient(to top,pink,DeepSkyBlue);

③向左线性渐变

background:linear-gradient(to left,pink,DeepSkyBlue);

④向右线性渐变

background:linear-gradient(to right,pink,DeepSkyBlue);

3.颜色

使用多个颜色

background:linear-gradient(to right,pink,DeepSkyBlue,Aqua,Gold,OrangeRed);

background:linear-gradient(135deg,pink,DeepSkyBlue,Aqua,Gold,OrangeRed);

4.支持透明度设置

background:linear-gradient(rgba(255,182,193,0.7),rgba(0,191,255,0.7));

5.支持设置纯色

//使用像素点设置

background:linear-gradient(to right,pink 0,pink 300px,DeepSkyBlue 300px ,DeepSkyBlue 600px);

6.重复的线性渐变repeating-linear-gradient

background:repeating-linear-gradient(to right,pink 10%,DeepSkyBlue 20% );