渐变
(浏览器支持不是很好,可能无法显示时用: -ms- -o- -m0z- -webkit-)
分两种:
线性渐变:linear-gradient (横着的线) 至少定义两种颜色值
径向渐变radial -gradient （竖着渐变）
1. 线性渐变：
写法: background:linear-gradient(red,blue); 至少两种颜色
线性渐变,颜色从左到右的写法
background: linear-gradient(to right,red,blue); to right 定义了 第一个颜色向 右 过渡。
background:linear-gradient(to bottom right,red,blue); 对角渐变, 第一个颜色向 右下过渡。
同样,可以使用角度,来做渐变效果。 写法:
background:linear-gradient(角度,red，blue);
即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。
重复的线性渐变 %定义颜色的宽度
background: repeating-linear-gradient(to right,red,blue 10%,green 20%)
2. 径向渐变:(理解为有某个点向四周扩散)
background: radial-gradient(red,yellow,green);
也可加入%定义大小
background: radial-gradient(red 20%,yellow 50%,green 3%);
径向渐变有两个值,规定的渐变是圆形还是椭圆,默认值市椭圆形
circle 定义圆形, 默认值 ellipse 椭圆形
background: radial-gradient(red,yellow,green);
重复的径向渐变
background:repeating-radial-gradient(red,yellow,blue)
