12.css3 渐变

CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

简单来说:
从一个颜色到另一个颜色平稳得过渡（颜色逐渐得变化）

线性渐变

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

说明：
	direction：默认为to bottom，即从上向下的渐变；
	to left,to right, to bottom,to top
	to right top, to left bottom,to right botom
	方向可以使用角度的变化：  deg 代表度数
    例如:
     标准模式： background:linear-gradient(30deg,red,blue)
     兼容模式： background:-webkit-linear-gradient(60deg,reb,blue)
	 注：如果 linear-gradient()  添加浏览器前缀，方向是不加to的！ 指的是从哪个方向开始     
 
  渐变色。颜色的分布可以用百分比控制：
   举例：
     background:linear-gradient(to left,red 10%,blue 30%);            
 	说明：到10%的位置都为红色，出来10%的位置开始向蓝色渐变，直到渐变到30%的位置为蓝色

径向渐变

 径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变
语法：
     background: radial-gradient(center, shape, size, start-color, ..., last-color);
说明：
	center：渐变起点的位置，可以为百分比，默认是图形的正中心。
	shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
	size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。

重复性线性渐变

 background:-webkit-repeating-linear-gradient(red 10%,yellow 20%)

重复性径向渐变

background:-webkit-repeating-radial-gradient(red 10%,yellow 20%)