CSS3---------------渐变

一、渐变 --(gradient)

　　#、CSS3渐变(gradients)可以让你在两个或多个指定颜色之间显示平稳的过度，包括透明度。CSS3定义了两种类型的渐变(gradients):　　

　　　　1.线性渐变(Linear Gradients)-向下、向上、向左、向右、对角方向：（to bottom、to top、to right、to left、to bottom right，等等）

　　　　2.径向渐变(Radial Gradients)-由他们的中心定义

　　　　CSS3 线性渐变（linear-gradient/repeating-linear-gradient）：

　　　　创建一个线性渐变，至少定义两种颜色结点，用于呈现平稳过度的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

　　　　　　指定方向语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

　　　　　　linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* }  //标准写法

　　　　　　参数：

　　　　　　　　<angle>是角度，单位为deg

　　　　　　　　point ： 第一个参数表示线性渐变的方向，可用关键字top、left、bottom、right，to top是从上到下、to left是从左到右，如果定义成to left top，那就是从左上角到右下角（to可省略）。

　　　　　　　　<stop > = <color> [ <length> | <percentage>]:

　　　　　　　　<color>：指渐变的起止颜色。

　　　　　　　　<length>：用长度值指定起止色位置，不允许负值。

　　　　　　　　<percentage>：用百分比指定起止色位置。

　　　　　　　　　　　　　　　　background: linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);  

　　　　　　　　　　　　　　　　　background:linear-gradient(left top,yellow,blue);
　　　　　　　　　　　　　　　　　background: repeating-linear-gradient(red, yellow 10%, green 15%);