自从有了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);
}

效果:


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