下图所示，在网页设计中，有时候会需要用到渐变效果，渐变可以创建出类似于彩虹的视觉图案效果，在没有CSS3之前，为了显示一个渐变需要专门制作一个图片，这种不法不但不灵活还增加请求数，而CSS3可以轻松实现网页渐变效果，用于做渐变背景、渐变导航、配合CSS3动画做特效等。在CSS3中，Gradient（渐变）分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。CSS颜色线性渐变的语法在各种浏览器里的实现稍微有些不同，但最后是统一标准的：

CSS颜色线性渐变的语法

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

第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。至少需要两种颜色(起点和终点)，你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色，或一种颜色加一个百分比：

/*color-stop(percentage/amount,color)*/color-stop(0.20,red)

因为CSS渐变色(Gradients)技术是CSS3里比较新的技术，属于高级的CSS功能，于是每种浏览器对这种技术的实现都添加了一些自己的特色。例如以WebKIt为渲染引擎的谷歌浏览器，就对它实现了多种语法。下面的这段代码基本包括了所有自顶向下颜色渐变的所有情况：

#example1{/*底色*/background-color:#063053;/*chrome2+,safari4+;multiplecolorstops*/background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0.32,#063053),color-stop(0.66,#395873),color-stop(0.83,#5c7c99));/*chrome10+,safari5.1+*/background-image:-webkit-linear-gradient(#063053,#395873,#5c7c99);/*firefox;multiplecolorstops*/background-image:-moz-linear-gradient(top,#063053,#395873,#5c7c99);/*ie6+*/filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053',endColorstr='#395873');/*ie8+*/-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053',endColorstr='#395873')";/*ie10*/background-image:-ms-linear-gradient(#063053,#395873,#5c7c99);/*opera11.1*/background-image:-o-linear-gradient(#063053,#395873,#5c7c99);/*标准写法*/background-image:linear-gradient(#063053,#395873,#5c7c99);

注意，我们首先设定了一个背景色。这个颜色是在万一用户使用的浏览器不支持CSS渐变色(Gradients)技术时使用的颜色。CSS渐变色(Gradients)技术里还支持带有角度的渐变方向，而不仅仅只有直上直下或直左直右。我们可以用下面的语法实现它：

#example2{/*fallback*/background-color:#063053;/*chrome2+,safari4+;multiplecolorstops*/background-image:-webkit-gradient(linear,leftbottom,righttop,color-stop(0.32,#063053),color-stop(0.66,#395873),color-stop(0.83,#5c7c99));/*chrome10+,safari5.1+*/background-image:-webkit-linear-gradient(45deg,#063053,#395873,#5c7c99);/*firefox;multiplecolorstops*/background-image:-moz-linear-gradient(45deg,#063053,#395873,#5c7c99);/*ie10*/background-image:-ms-linear-gradient(45deg,#0630530%,#395873100%);/*opera11.1*/background-image:-o-linear-gradient(45deg,#063053,#395873);/*The"standard"*/background-image:linear-gradient(45deg,#063053,#395873);}

我们可以做的更复杂些….一个色彩缤纷的CSS颜色渐变？下面我们来做一个彩虹：

/*example3-linearrainbow*/#example3{/*fallback*/background-color:#063053;/*chrome2+,safari4+;multiplecolorstops*/background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0.20,red),color-stop(0.40,green),color-stop(0.6,blue),color-stop(0.8,purple),color-stop(1,orange));/*chrome10+,safari5.1+*/background-image:-webkit-linear-gradient(red,green,blue,purple,orange);/*firefox;multiplecolorstops*/background-image:-moz-linear-gradient(top,red,green,blue,purple,orange);/*ie10*/background-image:-ms-linear-gradient(red,green,blue,purple,orange);/*opera11.1*/background-image:-o-linear-gradient(red,green,blue,purple,orange);/*The"standard"*/background-image:linear-gradient(red,green,blue,purple,orange);}

关于IE对CSS颜色渐变技术的支持做一些说明：在早期IE是使用filter和-ms-filter语法实现渐变色，而最新版的IE里改为了-ms-linear-gradient语法。我们可以使用CSS里条件判断语句来解决这个问题：

<!--[ifltIE10]><style>.gradientElement{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053',endColorstr='#395873');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053',endColorstr='#395873')";}</style><![endif]-->

线性渐变的语法

对象选择器 {background:-浏览器前缀-linear-gradient( 起点方向,起点颜色,终点颜色);}

径向渐变的语法

对象选择器 {background:-浏览器前缀-radial-gradient( 起点方向,形状,大小,起点颜色,终点颜色);}

渐变的兼容方法

1、线性渐变

各浏览器前缀

(1)Firefox

(2)Safari , Chrome

(3)Opera 11.10+

兼容IE

2、径向渐变

径向渐变和线性渐变的语法差不多

渐变应用实例

1、径向渐变做大背景

background-color:#4B770A;background-image:-webkit-gradient(radial,50%400,1,50%400,400,from(rgba(255,255,255,0.3)),to(rgba(255,255,255,0)));//仅实现了webkit下的效果

2、蒙版效果

position:fixed;width:100%;height:60px;bottom:0px;content:'';background:-moz-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,rgba(255,255,255,0)),color-stop(33%,rgba(255,255,255,0.33)),color-stop(66%,rgba(255,255,255,0.73)),color-stop(91%,rgba(255,255,255,1)));background:-webkit-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);background:-o-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);background:-ms-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);background:linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.73)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0);

3、渐变按钮

.myButton{-moz-box-shadow:inset0px1px0px0px#ffffff;-webkit-box-shadow:inset0px1px0px0px#ffffff;box-shadow:inset0px1px0px0px#ffffff;background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf));background:-moz-linear-gradient(top,#ededed5%,#dfdfdf100%);background:-webkit-linear-gradient(top,#ededed5%,#dfdfdf100%);background:-o-linear-gradient(top,#ededed5%,#dfdfdf100%);background:-ms-linear-gradient(top,#ededed5%,#dfdfdf100%);background:linear-gradient(tobottom,#ededed5%,#dfdfdf100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#dfdfdf',GradientType=0);background-color:#ededed;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1pxsolid#dcdcdc;display:inline-block;cursor:pointer;color:#777777;font-family:arial;font-size:15px;font-weight:bold;padding:6px24px;text-decoration:none;text-shadow:0px1px0px#ffffff;margin-top:100px;}.myButton:hover{background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed));background:-moz-linear-gradient(top,#dfdfdf5%,#ededed100%);background:-webkit-linear-gradient(top,#dfdfdf5%,#ededed100%);background:-o-linear-gradient(top,#dfdfdf5%,#ededed100%);background:-ms-linear-gradient(top,#dfdfdf5%,#ededed100%);background:linear-gradient(tobottom,#dfdfdf5%,#ededed100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#ededed',GradientType=0);background-color:#dfdfdf;}.myButton:active{position:relative;top:1px;}

4、用径向渐变做一张优惠券

主要的代码如下：

background:radial-gradient(transparent0,transparent5px,#F39B005px);background-size:15px15px;background-position:9px3px;

完整代码：

CSS代码

这是公共样式.stamp{width:387px;height:140px;padding:010px;position:relative;overflow:hidden;}.stamp:before{content:'';position:absolute;top:0;bottom:0;left:10px;right:10px;z-index:-1;}.stamp:after{content:'';position:absolute;left:10px;top:10px;right:10px;bottom:10px;box-shadow:0020px1pxrgba(0,0,0,0.5);z-index:-2;}.stampi{position:absolute;left:20%;top:45px;height:190px;width:390px;background-color:rgba(255,255,255,.15);transform:rotate(-30deg);}.stamp.par{float:left;padding:16px15px;width:220px;border-right:2pxdashedrgba(255,255,255,.3);text-align:left;}.stamp.parp{color:#fff;}.stamp.parspan{font-size:50px;color:#fff;margin-right:5px;}.stamp.par.sign{font-size:34px;}.stamp.parsub{position:relative;top:-5px;color:rgba(255,255,255,.8);}.stamp.copy{display:inline-block;padding:21px14px;width:100px;vertical-align:text-bottom;font-size:30px;color:rgb(255,255,255);}.stamp.copyp{font-size:16px;margin-top:15px;}

.stamp01{background:#F39B00;background:radial-gradient(rgba(0,0,0,0)0,rgba(0,0,0,0)5px,#F39B005px);background-size:15px15px;background-position:9px3px;}.stamp01:before{background-color:#F39B00;}

.stamp02{background:#D24161;background:radial-gradient(transparent0,transparent5px,#D241615px);background-size:15px15px;background-position:9px3px;}.stamp02:before{background-color:#D24161;}

.stamp03{background:#7EAB1E;background:radial-gradient(transparent0,transparent5px,#7EAB1E5px);background-size:15px15px;background-position:9px3px;}.stamp03:before{background-color:#7EAB1E;}.stamp03.copy{padding:10px6px10px12px;font-size:24px;}.stamp03.copyp{font-size:14px;margin-top:5px;margin-bottom:8px;}.stamp03.copya{background-color:#fff;color:#333;font-size:14px;text-decoration:none;padding:5px10px;border-radius:3px;display:block;}

.stamp04{width:390px;background:#50ADD3;background:radial-gradient(rgba(0,0,0,0)0,rgba(0,0,0,0)4px,#50ADD34px);background-size:12px8px;background-position:-5px10px;}.stamp04:before{background-color:#50ADD3;left:5px;right:5px;}.stamp04.copy{padding:10px6px10px12px;font-size:24px;}.stamp04.copyp{font-size:14px;margin-top:5px;margin-bottom:8px;}.stamp04.copya{background-color:#fff;color:#333;font-size:14px;text-decoration:none;padding:5px10px;border-radius:3px;display:block;}

HTML代码

<divclass="stampstamp01"><divclass="par"><p>XXXXXX折扣店</p><subclass="sign">￥</sub><span>50.00</span>_优惠券<p>订单满100.00元</p></div><divclass="copy">副券<p>2015-08-13<br>2016-08-13</p></div><i></i></div>

<divclass="stampstamp02"><divclass="par"><p>XXXXXX折扣店</p><subclass="sign">￥</sub><span>50.00</span>_优惠券<p>订单满100.00元</p></div><divclass="copy">副券<p>2015-08-13<br>2016-08-13</p></div><i></i></div>

<divclass="stampstamp03"><divclass="par"><p>XXXXXX折扣店</p><subclass="sign">￥</sub><span>50.00</span>_优惠券<p>订单满100.00元</p></div><divclass="copy">副券<p>2015-08-13<br>2016-08-13</p><ahref="#">立即使用</a></div><i></i></div>

<divclass="stampstamp04"><divclass="par"><p>XXXXXX折扣店</p><subclass="sign">￥</sub><span>50.00</span>_优惠券<p>订单满100.00元</p></div><divclass="copy">副券<p>2015-08-13<br>2016-08-13</p><ahref="#">立即使用</a></div><i></i></div>

PS：用这个方式还可以做邮票，不信你试试

相信你看到这，一定觉得，这么长串的代码，我怎么写出来，看着都晕。如果是简单的渐变，可以用less的函数来生成，只需要提供开始颜色和停止颜色。如果是按钮，则有专门的网站，可视化生成。

Less函数

/*线性渐变*/.gradient(@origin:top,@start:#ffffff,@stop:#000000){background-color:@start;background-image:-webkit-linear-gradient(@origin,@start,@stop);background-image:-moz-linear-gradient(@origin,@start,@stop);background-image:-o-linear-gradient(@origin,@start,@stop);background-image:-ms-linear-gradient(@origin,@start,@stop);background-image:linear-gradient(@origin,@start,@stop);}

/*快速渐变*/.quick-gradient(@origin:left,@alpha:0.2){background-image:-webkit-linear-gradient(@origin,rgba(0,0,0,0.0),rgba(0,0,0,@alpha));background-image:-moz-linear-gradient(@origin,rgba(0,0,0,0.0),rgba(0,0,0,@alpha));background-image:-o-linear-gradient(@origin,rgba(0,0,0,0.0),rgba(0,0,0,@alpha));background-image:-ms-linear-gradient(@origin,rgba(0,0,0,0.0),rgba(0,0,0,@alpha));background-image:linear-gradient(@origin,rgba(0,0,0,0.0),rgba(0,0,0,@alpha));}

用法：

//html代码<divclass="div1"></div><divclass="div2"></div>//css代码div{width:200px;height:80px;margin:10px;}.div1{.gradient(top,#00B7EA,#0391B3);}.div2{.quick-gradient();}

、有点俗态的开场白

要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但是，在对CSS3支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不支持Opera浏览器。

本文实例效果都是同样的效果，就是垂直渐变，起始颜色红色，结束颜色蓝色，结束的蓝色的透明度是0.5。

二、IE浏览器下的渐变背景

IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码：

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);

相关说明：

上面的滤镜代码主要有三个参数，依次是：startcolorstr, endcolorstr, 以及gradientType。

其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。

上面代码实现的是红色至蓝色的渐变，但是不含透明度变化，这是由于IE目前尚未支持opacity属性以及RGBA颜色，要实现IE下的透明度变化，还是需要使用IE滤镜，IE的透明度滤镜功能比较强大，这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。例如下面的使用：

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)

其中各个参数的含义如下：

opacity表示透明度，默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。

finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。

style用来指定透明区域的形状特征：

0 代表统一形状

1 代表线形

2 代表放射状

3 代表矩形。

startx 渐变透明效果开始处的 X坐标。

starty 渐变透明效果开始处的 Y坐标。

finishx 渐变透明效果结束处的 X坐标。

finishy 渐变透明效果结束处的 Y坐标。

综合上述，实现IE下含透明度变化红蓝垂直渐变的代码如下：

.gradient{
 width:300px; height:150px;
 filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
 -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
}
<div class="gradient"></div>

结果如下图：

三、Firefox浏览器下的渐变背景

对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性，-moz-linear-gradient属性，在之前文章我详细介绍了Firefox3.6下渐变背景的实现，您有兴趣可以狠狠地点击这里：前端入门学习。这里我就不再具体讲述了，对于本文开头提到的要实现的效果的实现可以参见下面的代码：

.gradient{
 width:300px;
 height:150px;
 background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
}
<div class="gradient"></div>

此段代码在Firefox3.6浏览器下的效果是：

四、chrome/Safari浏览器下的渐变背景实现

对于webkit核心的浏览器，如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法，css-gradient，具体为-webkit-gradient，使用语Firefox浏览器是有一些差异的。我在上上一篇文章对此进行了非常详细的介绍，您可以狠狠地点击这里：找到适合自己的前端发展方向。具体使用就不详述了，参见下面的代码：

.gradient{
 width:300px;
 height:150px;
 background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); 
}
<div class="gradient"></div>

此段代码在Safari 4浏览器下的效果是：

补充于2011-04-07

Opera11也支持了CSS3渐变。其用法与Firefox一致，需要使用-o-的前缀。另外，Chrome的渐变用法也开始向FireFox浏览器下的用法靠拢。

五、综合 – 兼容性的渐变背景效果

相关代码如下：

.gradient{
 width:300px;
 height:150px;
 filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
 -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/	
 background:red; /* 一些不支持背景渐变的浏览器 */ 
 background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
 background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); 
 background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
}
<div class="gradient"></div>

六、结语

CSS3的潜力非常的大，就渐变这一块可以创建很多精湛的UI效果，而以往这些效果都只能使用图片实现。CSS渐变背景的实现可以有效降低网页的图片数，也就是降低了HTTP请求，是非常受用的。但是IE浏览器一直蹲在茅厕边啃鸡腿——自以为美味，得使用资源消耗很高的滤镜才能实现渐变效果。所以，目前而言，渐变背景的的应用与否还是有待于利弊权衡的。