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);
//设置为圆形
