线性渐变(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);