CSS3 渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡
CSS3 定义了两种类型渐变

线性渐变:向上、向下、向左、向右、对角
径向渐变:由中心定义

线性渐变

background-image: linear-gradient(red, green);//从上向下的

background-image: linear-gradient(to top, red, green);//从下向上的

background-image: linear-gradient(to right,red, green);//从左向右的

background-image: linear-gradient(to left,red, green);//从右向左的

background-image: linear-gradient(to bottom right,red, green);//对角

background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));//透明渐变

 background-image: repeating-linear-gradient(45deg, red, yellow 7%, green 10%);//重复线性渐变

 background-image: repeating-linear-gradient( red 10%, yellow 85%, green 5%);//不均匀分布渐变

径向渐变

background-image: radial-gradient(pink, skyblue, rgb(219, 219, 150));//均匀

background-image: radial-gradient(red 5%, green 15%, blue 60%); //不均匀

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);//不断重复渐变

设置形状:shape 参数定义了形状。可以是circle(圆形)或者ellipse(椭圆型)
注意：一般默认为椭圆形

 background-image: radial-gradient(circle, red, yellow, green);
//设置为圆形