Css3渐变

Css3渐变

css3渐变分为线性渐变和径向渐变两种。
1：线性渐变：是从一个点到另一个点的平稳过渡。
书写方式：background-image：linear-gradient（color-stop1，color-stop2，color-stop3，…）
Stop:颜色的分布位置，默认均匀分布。
例1：background-image: linear-gradient( red,green);}
为其书写两个颜色，那么两个颜色加上渐变区域，将平分区域。如图所示：

红色区域，绿色区域，渐变色区域各占空间的33.33%。

例2：对颜色设置百分比来控制颜色显示的位置，
background-image: linear-gradient( red 10%,green 20%,blue 30%);}如图所示：

红色区域为0%-10%，红色到绿色的渐变色区域为10%-20%，绿色到蓝色的区域为20%-30%，剩余70%皆显示为最后一个颜色，蓝色。
此外，在linear前加repeating可实现颜色的循环出现，如下所示：
background-image: repeating-linear-gradient( red 10%,green 20%,blue 30%);}

例3：线性渐变默认是从上往下渐变，我们可以通过添加to改变其方向。
background-image:linear-gradient(to right, red,green,blue);}将其改为从左至右。

background-image:linear-gradient(to left top, red,green,blue);}将其改为从右下至左上。

例3：线性渐变我们还可以为其添加偏转角度。
background-image:linear-gradient(30deg, red,green,blue);}偏转角度为30度。

角度说明：
现版本 老版本
在现版本，老版本中角度都是从0度到90度的偏转角，只是两个版本的0度，90度轴相反。

2：径向渐变：是从一个点逐渐向外扩展的平稳过渡。
书写方式：background-image：radial-gradient（start-color，…，last-color）
例1：background-image:radial-gradient( red,green,blue);}
为其书写两个颜色，那么两个颜色加上渐变区域，将平分区域，各个区域各占33.33%。

此外：径向渐变的其他属性还有：
Position：渐变起点的位置，可以为百分比，默认是图形的中心。
Shape：渐变的形状 ellipse：椭圆形（默认值）
circle：圆形
且如果元素形状为正方形元素，则ellipse和circle显示效果一样。
Size：渐变的大小，即渐变到哪里停止，有四个属性值：
closest-side：最近边 farthest-side：最远边
closest-corner：最边角 farthest-corner:最远角
注：在HTML5中，最常使用线性渐变。