自从有了css3的Gradient，我们给对象做渐变更加方便，下面来看一下css3的Gradient的使用。

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。我们先来分析线性渐变。径向渐变下一节来分析。

由于浏览器分为不同的内核。一下我们将对不同的浏览器分别来进行分析。

CSS3的线性渐变

一、线性渐变在Mozilla下的应用

语法：

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

具体示例：
background: -moz-linear-gradient(top,#ddd,#333);

参数：

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

moz-gradient.png


二、线性渐变在 Webkit 下的应用
语法：

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

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

具体示例： 
background: -webkit-gradient(linear,center top,center bottom,from(#ddd), to(#333));background: -webkit-linear-gradient(top,#ccc,#000);参数：
-webkit-gradient 是 webkit 引擎对渐变的实现参数，一共有五个。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop 函数接受两个参数，color-stop可以理解为过渡点，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。如图所示：

3.jpg

4.jpg

三、线性渐变在Opera下的应用

Opera下的写法跟火狐下的写法一样，只是前缀不同。这里就不多说了，看示例
具体示例：

background:-o-linear-gradient(top,#ddd,#333);

但是从2013年开始Opera已经转投Webkit了。所以现在跟Webkit下一样的。

四、线性渐变在Trident(IE)下的应用

ie下不支持linear-gradient，所以是要依靠滤镜实现渐变了。

语法：

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: “progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)”;/*IE8+*/
startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。

   下面来看具体的例子：

所有demo的公用样式为： 

.com{
     width:400px;
     height:100px;
     color:#fff;
}

1、例子一：开始于center（水平方向）和top（垂直方向）也就是Top → Bottom：

html：
<div class=”com demo”></div>

css: 

.demo{
    background:-moz-linear-gradient(top,#6495Ed,#666);
    background:-webkit-linear-gradient(top,#6495Ed,#666);
    background:-webkit-gradient(linear, center top, center bottom, from(#6495Ed), to(#666), color-stop(0.5, #f00));
    background:linear-gradient(top,#6495Ed,#666);
}


效果：

 

 

2、例子二：开始于left（水平方向）和center（垂直方向）也是就Left → Right：

html：
<div class=”com demo1″></div>css: .demo1{    background:-moz-linear-gradient(left,#6495Ed,#666);    background:-webkit-linear-gradient(left,#6495Ed,#666);    background:-webkit-gradient(linear,left center, right center, from(#6495Ed), to(#666));    background:linear-gradient(left,#6495Ed,#666);}

效果：

  
.demo2{
    background:-moz-linear-gradient(left,#6495Ed,#34453d,#14923d,#666);
    background:-webkit-linear-gradient(left,#6495Ed,#34453d,#14923d,#666);
    background:-webkit-gradient(linear,left center, right center, from(#6495Ed), to(#666));
}


3、例子三：复合多过渡色渐变1

html：
<div class=”com demo2″></div>
css:  
.demo2{
    background:-moz-linear-gradient(left,#6495Ed,#34453d,#14923d,#666);
    background:-webkit-linear-gradient(left,#6495Ed,#34453d,#14923d,#666);
    background:-webkit-gradient(linear,left center, right center, from(#6495Ed), to(#666));
}

效果：

 

 

4、例子四：复合多过渡色渐变2

html：
<div class=”com demo3″></div>
css:  
.demo3{
    background:-moz-linear-gradient(left,#6495Ed,#34453d 10%,#006400 50%,#FF00FF,#666);
    background:-webkit-linear-gradient(left,#6495Ed,#34453d 10%,#006400 50%,#FF00FF,#666);
    background:-webkit-gradient(linear,left center, right center, from(#6495Ed), color-stop(0.1, #f00), color-stop(0.3, #006400), color-stop(0.5, #FF00FF), to(#666));
    background:linear-gradient(left,#6495Ed,#34453d 10%,#006400 50%,#FF00FF,#666);
}

效果：

 

 

5、例子五：指定角度的渐变

当指定的角度，请记住，它是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。 我们来看看各角度的区别

css:  
.deg0 {
background: -moz-linear-gradient(0deg, #6495Ed, #666);
background: -webkit-gradient(linear,0 50%,100% 50%,from(#6495Ed),to(#666));
background: -webkit-linear-gradient(0deg, #6495Ed, #666);
}
.deg45 {
background: -moz-linear-gradient(45deg, #6495Ed, #666);
background: -webkit-gradient(linear,0 100%,100% 0%,from(#6495Ed),to(#666));
background: -webkit-linear-gradient(45deg, #6495Ed, #666);
}
.deg90 {
background: -moz-linear-gradient(90deg, #6495Ed, #666);
background: -webkit-gradient(linear,50% 100%,50% 0%,from(#6495Ed),to(#666));
background: -webkit-linear-gradient(90deg, #6495Ed, #666);
}
.deg135 {
background: -moz-linear-gradient(135deg, #6495Ed, #666);
background: -webkit-gradient(linear,100% 100%,0 0,from(#6495Ed),to(#666));
background: -webkit-linear-gradient(135deg, #6495Ed, #666);
}
.deg180 {
background: -moz-linear-gradient(180deg, #6495Ed, #666);
background: -webkit-gradient(linear,100% 50%,0 50%,from(#6495Ed),to(#666));
background: -webkit-linear-gradient(180deg, #6495Ed, #666);
}
.deg225 {
background: -moz-linear-gradient(225deg, #6495Ed, #666);
background: -webkit-gradient(linear,100% 0%,0 100%,from(#6495Ed),to(#666));
background: -webkit-linear-gradient(225deg, #6495Ed, #666);
}
.deg270 {
background: -moz-linear-gradient(270deg, #6495Ed, #666);
background: -webkit-gradient(linear,50% 0%,50% 100%,from(#6495Ed),to(#666));
background: -webkit-linear-gradient(270deg, #6495Ed, #666);
}
.deg315 {
background: -moz-linear-gradient(315deg, #6495Ed, #666);
background: -webkit-gradient(linear,0% 0%,100% 100%,from(#6495Ed),to(#666));
background: -webkit-linear-gradient(315deg, #6495Ed, #666);
}
.deg360 {
background: -moz-linear-gradient(360deg, #6495Ed, #666);
background: -webkit-gradient(linear,0 50%,100% 50%,from(#6495Ed),to(#666));
background: -webkit-linear-gradient(360deg, #6495Ed, #666);
}
效果：
eg0
deg45
deg90
deg135
deg180
deg225
deg270
deg315
deg360


6、例子六：渐变上应用透明─透明度

html：
<div class=”com demo5″></div>
css:  
.demo5{
    width:300px;height:300px;
    background:-moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(../4.jpg);
    background:-webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(../4.jpg);
}

效果：


大家可以对比一下效果，下面是真正的美女原图