深入剖析CSS中的线性渐变linear-gradient

在CSS3出现之前，渐变效果只能通过图形软件设计图片来实现，可拓展性差，还影响性能。如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果。渐变实际上分为线性渐变和径向渐变两种，本文介绍线性渐变。

定义　　

渐变实际上是两种或多种颜色之间的平滑过渡。而线性渐变是多种颜色沿着一条直线(称为渐变线)过渡。渐变的实现由两部分组成：渐变线和色标。渐变线用来控制发生渐变的方向；色标包含一个颜色值和一个位置，用来控制渐变的颜色变化。浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变，通过确定多个色标可以制作多色渐变效果。

[注意]safari4-5、IOS3.2-4.3、android2.1-3只支持线性渐变，且需要添加-webkit-；safari5.1-6、IOS5.1-6.1、android4-4.3支持线性和径向渐变，且需要添加-webkit-；IE10+及其他高版本浏览器支持标准写法

1. <linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)   
2. <side-or-corner> = [left | rightright] || [top | bottombottom]  

 

渐变线　　
渐变线从渐变框中心向两个方向进行拓展，起点和终点是渐变线与经过渐变框的一个角的垂直线的相交点

渐变的第一个参数用于指定渐变线，默认是to bottom。有两种方式指定渐变线方向

【1】使用角度

0deg表示沿着元素的中心线由下向上的方向(类似于y轴)，且正角度表示顺时针旋转

[注意]对于-webkit-旧版本浏览器，如windows系统下的safari浏览器来说，0deg表示沿着元素中心线从左向右的方向(类似于x轴),且正角度表示逆时针旋转

所以-webkit-旧版本浏览器与标准浏览器的之间线性渐变的角度关系为

-webkit-浏览器 = 90deg - 标准浏览器

相当于
-webkit-linear-gradient(90deg,red,blue) = linear-gradient(0deg,red,blue)

[注意]对于webkit内核的浏览器来说，使用javascript改变元素的样式。当带-webkit-的私有样式和不带-webkit-的标准样式同时存在的时候，并不一定是后面覆盖前面。所以如果两种写法产生的效果相同，但参数不同时，要使用浏览器识别来分别写不同的情况。

【2】使用关键字

1. to top -> 0deg   
2. to rightright -> 90deg   
3. to bottombottom -> 180deg   
4. to left -> -90deg(或270deg)   
5. to top left -> -45deg(或315deg)   
6. to top rightright -> 45deg   
7. to bottombottom left -> -135deg(或225deg)   
8. to bottombottom rightright -> 135deg  

[注意]window系统的safari浏览器并不支持'to'加方向的关键字，如to left。它只支持方向关键字，如left。当然了left 和 to left 方向是正好相反的

色标　　
浏览器对于色标并没有默认值，且必须设置至少两个色标。色标由颜色和位置组成。颜色使用任何一种颜色模式都可以，而位置可以使用百分比或数值。

[注意]颜色的位置也可以设置负值

【1】必须是颜色在前，位置在后

1. //正确   
2. background-image: linear-gradient(red 0%,blue 100%);   
3. //错误   
4. background-image: linear-gradient(0% red,100% blue);  

 

【2】位置可以省略，浏览器默认会把第一个颜色的位置设置为0%，把最后一个颜色的位置设置为100%

1. background-image: linear-gradient(red 0%,blue 100%);   
2. //等价于上一个   
3. background-image: linear-gradient(red,blue);  

【3】若渐变只有两种颜色，且第一个颜色的位置设置为n%，第二个颜色的位置设置为m%。则浏览器会将0%-n%的范围设置为第一个颜色的纯色，n%-m%的范围设置为第一个颜色到第二个颜色的过渡，m%-100%的范围设置为第二个颜色的纯色

1. background-image: linear-gradient(red 30%,blue 60%);   
2. //等价于上一个   
3. background-image: linear-gradient(red 0%,red 30%,blue 60%,blue 100%);  

【4】若渐变颜色没有指定位置，则它们会均匀分布