CSS3之渐变效果

在css3出来之前，想要出现渐变效果必须就要制作一张图片。不过css3的出现使得渐变效果变得简单。由于不是所有的浏览器都支持css3，所以不是所有的浏览器都能够呈现出css3的效果出来。因此目前大部分还是需要制作图片的提现渐变的。

目前Mozilla内核的(Firefox)和Webkit内核的(Chrome和Safari)浏览器支持这一属性。不过两者对于渐变的语法是有些差异的。

Webkit内核：它是第一个支持渐变的浏览器内核。它的实际用法：

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法；

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则；切记要用逗号隔开这些参数； 

先看老式的写法：background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

接着我们在来看一下新式的写法：background:-webkit-linner-gradient(top,#ccc,#000); webkit新式的写法和Mozilla的一样了。当然当有一日它们统一成一样的了那就不用单独再去处理不同内核的写法了，这将大大节省开发时间。

-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。

第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。

第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。

第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。

Mozilla内核：firefox从3.6版本才开始支持渐变，并且它和webkit略有不同的写法：

background:-moz-linner-gradient(top,red,blue); 请注意这里的渐变类型放在属性前缀中了。

-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

Color-stops: 如果你不需要一个颜色到另一个颜色100%渐变怎么办。这就是color-stops起作用的时候了。

background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */

background: -moz-linear-gradient(top, #dedede, white 8%);

background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));

这次我们让渐变结束与8%，而不是默认的100%。

上面我们主要介绍了线性渐变在两大核心模块下的实现方法，接下来我们主要针对线性渐变在这两个内核的浏览器下的实现各种不同线性渐变的实例；

具体应用如下：

background:-moz-linear-gradient(top,#ace,#f96);/*Mozilla*/
background:-webkit-gradient(linear,0 0%,0% 100%,from(#ace),to(#f96));/*Old gradient for webkit*/
background:-webkit-linear-gradient(top,#ace,#f96);/*new gradient for Webkit*/

接下里我们看看color-stops函数的应用：

/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
/* Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.25, #f96), 
            color-stop(0.5, #ace), color-stop(0.75, #f96), to(#ace));
/* Chrome 10+ */
background: -webkit-linear-gradient(left, #ace, #f96, #ace, #f96, #ace); 

实现效果如：

这里的color-stop(0.75, #f96)这里指的意思是在0.75的地方颜色为#f96;这里就不一一说明了。

在指定的位置停止，对于没有指定的位置颜色会均匀分布。来看具体的实例：

 /* Firefox 3.6+ */
 background: -moz-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);
 /* Chrome 1-9 */
 background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.05, #f96), color-stop(0.5, #ace), 
              color-stop(0.95, #f96), to(#ace));
 /* Chrome 10+ */
 background: -webkit-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);

具体的效果图如下：

  角度：除了使用百分比和left，top等还可以使用角度来确定渐变的方向。当指定的角度请记住，它是由一个水平线和渐变线产生的角度，逆时针方向。因此使用0deg将产生一个左到右的横向梯度，而90deg将创建一个从底部到顶部的垂直渐变。

渐变除了线性渐变还有径向渐变，径向渐变的使用方法其实和线性的用法差不多只是颜色布局不同而已。这里我们主要研究的是线性渐变，有兴趣的可以研究哈径向渐变。

背景渐变如果和box-shadow一起运用的好，那效果还是挺炫的。结尾挺草率的······因为马上下班啦！啦啦啦~~~