css3渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

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

1.从上向下渐变

background-image: linear-gradient(#DDA0DD, #AFEEEE);

2.从左到右

background-image: linear-gradient(to right,#DDA0DD, #AFEEEE);

3.对角渐变

background-image: linear-gradient(to bottom right ,#DDA0DD, #AFEEEE);

4.使用角度

 background-image: linear-gradient(-90deg, red, yellow);

5.使用多个颜色，用（，）号隔开

background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

6.重复渐变

background-image: repeating-linear-gradient(to right ,#DDA0DD 50%, #AFEEEE 80%);

径向渐变（Radial Gradients）- 由它们的中心定义

1。默认情况

 background-image: radial-gradient(#DDA0DD, #AFEEEE, #ADFF2F);
 

2.颜色不均匀分布

 background-image: radial-gradient(#DDA0DD 5%, #AFEEEE 15%, #ADFF2F 60%);

3.设置形状（默认是椭圆）

  background-image: radial-gradient(circle, red, yellow, green);

4.设置方向

 background-image: radial-gradient(circle at left top,white,pink);