下圖所示，在網頁設計中，有時候會需要用到漸變效果，漸變可以創建出類似于彩虹的視覺圖案效果，在沒有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瀏覽器一直蹲在茅廁邊啃雞腿——自以為美味，得使用資源消耗很高的濾鏡才能實現漸變效果。所以，目前而言，漸變背景的的應用與否還是有待于利弊權衡的。