渐变

(浏览器支持不是很好,可能无法显示时用: -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)