css3系列之linear-gradient() repeating-linear-gradient() 和 radial-gradient() repeating-radial-gradient()

　　linear-gradient()  (线性渐变)　　repeating-linear-gradient()   (重复的线性渐变)

　　radial-gradient()  (镜像渐变)　　repeating-radial-gradient()   (重复的镜像渐变)

设置渐变色。

这四个属性， 都可以作为背景图片的url 放入使用。例如 border-image: linear-gradient();   和 background-image:  linear-gradient();

　　

　　 linear-gradient()  (线性渐变)

参数：

linear-gradient(#fff, #333);       第一个值 设置 从什么颜色 渐变到 第二个值的颜色。

linear-gradient(to bottom, #fff, #333);    第一个值是 从上渐变到 下。

linear-gradient(to top, #333, #fff);　　 第一个值是 从下渐变到 上。

linear-gradient(180deg, #fff, #333);　　第一个值 是角度的意思。 也就是从上渐变到下，一个圆是 360deg。

linear-gradient(to bottom, #fff 0px,  #333 100px);  第二个值的 0px  和 第三个值的 100px  是， 从 第二个值的颜色，0px位置开始， 渐变到 第三个值的 100px位置停止。具体是怎么样的，看下面图解。    也可以填 %。

　　repeating-linear-gradient()   (重复的线性渐变)

语法跟上面的 linear-gradient() 是一样的。

只不过 linear-gradient 后面没填充完的 地方用了最后一个颜色填充。

repeating-linear-gradient 他是用填充好的效果，重复填充 还没填充的地方

　　radial-gradient()  (镜像渐变)

 参数：  

radial-gradient(circle, #f00, #ff0, #080);   第一个值是， 正圆的意思。以正圆的方式 扩散渐变。  第二 三 四 个值。从圆心 #f00 颜色， 向外扩散。

radial-gradient(circle at center, #f00, #ff0, #080);  第一个值的意思是。 正圆，圆心在 中间，默认就是这个。

radial-gradient(circle at 50%, #f00, #ff0, #080);  50% 也是一样， 宽的 50%，也就是中间。（可以设置两个值，一个值代表left的位置，第二个代表top的位置）

radial-gradient(circle farthest-corner, #f00, #ff0, #080);　　

第一个值： 设置圆的类型。 有  正圆：circle  椭圆：ellipse， 可以搭配 at top 指定位置。(可以填 %，也可以填px， 一个值的时候，是设置left，两个值 是设置 left 和top 的位置)

第一个值还可以设置：

　　closest-side：指渐变的半径长度为从圆心到离圆心最近的边

　　closest-corner：指渐变的半径长度为从圆心到离圆心最近的角

　　farthest-side：指渐变的半径长度为从圆心到离圆心最远的边

　　farthest-corner：指渐变的半径长度为从圆心到离圆心最远的角

　　还可以加上 at 使用。( farthest-corner at 30px 30px，#f0f, #ff0 )

　　repeating-radial-gradient()   (重复的镜像渐变)

语法和上面一样。

只不过 radial-gradient 后面没填充完的 地方用了最后一个颜色填充。

repeating-radial-gradient 他是用填充好的效果，重复填充 还没填充的地方