漸變是CSS3中很棒的色彩功能，它不僅可以只添加一種顏色，還可以在一個(gè)聲明塊中添加多種顏色組合，而無需依賴圖像，這可以減少我們網(wǎng)站中的HTTP請(qǐng)求，從而使網(wǎng)站加載速度更快。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),蛟河企業(yè)網(wǎng)站建設(shè),蛟河品牌網(wǎng)站建設(shè),網(wǎng)站定制,蛟河網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,蛟河網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

如果您在CSS3中使用過漸變，那么您可能熟悉兩種方法：徑向漸變和線性漸變。今天的文章主要討論后者。

創(chuàng)建漸變

正如規(guī)范中所說，CSS3中的漸變是一個(gè)圖像，它不像其他新添加的特性那樣具有特殊屬性，所以它是使用background-image屬性聲明的。

如果我們看一下漸變的完整語法，它看起來有點(diǎn)臃腫，這可能會(huì)導(dǎo)致一些人的困惑。

1  div {

2  background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

3  background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

4  background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

5  background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

6  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

7  }

所以，讓我們一個(gè)一個(gè)深入到語法的每一部分，使事情更清楚。

首先，使用linear-gradient()函數(shù)聲明線性梯度，該函數(shù)有三個(gè)主要值。第一個(gè)值定義了漸變的起始位置，你可以使用一個(gè)描述性的關(guān)鍵字，如頂部開始梯度流動(dòng)從頂部；

1  div {

2  background-image: linear-gradient(top, #FF5A00, #FFAE00);

3  }

上面的代碼片段是W3C創(chuàng)建漸變的官方版本，它實(shí)際上更簡(jiǎn)單，也很容易理解，它還會(huì)創(chuàng)建如下漸變。

你也可以使用底部來做相反的事情，或者左右移動(dòng)。

我們還可以創(chuàng)建一個(gè)對(duì)角梯度使用角度作為梯度的起始位置。下面是一個(gè)例子：

1  div {

2  background-image: linear-gradient(45deg, #FF5A00, #FFAE00);

3  }

上面的代碼段將創(chuàng)建以下顏色漸變：

函數(shù)的第二個(gè)值將告訴第一個(gè)顏色信息及其以百分比表示的停止位置，停止位置實(shí)際上是可選的；瀏覽器非常聰明，可以確定正確的位置，所以當(dāng)我們不指定第一個(gè)顏色的停止時(shí)，瀏覽器將默認(rèn)為0%。

下一個(gè)值是第二個(gè)顏色組合。它的工作方式與之前的值類似，只是如果它是最后應(yīng)用的顏色，并且我們沒有指定停止位置，那么將使用100%作為默認(rèn)值?，F(xiàn)在，讓我們看看下面的例子：

1  div {

2  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

3  }

上面的代碼段將創(chuàng)建一個(gè)漸變，就像我們之前看到的那樣(沒有區(qū)別)，但現(xiàn)在我們指定顏色停止位置；

現(xiàn)在讓我們改變顏色停止，這次我們將為第一種顏色指定50%為第二種顏色指定51%，讓我們看看結(jié)果如何；

1  div {

2   background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);

3   }

透明度

在漸變中創(chuàng)建透明度也是可能的，為了創(chuàng)建效果，我們需要將顏色十六進(jìn)制轉(zhuǎn)換為rgba模式，并降低alpha通道。

1  div {

2  background-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));

3  }

上面的代碼段將顏色強(qiáng)度降低20%，漸變效果如下：

多種顏色

如果您希望添加更多的顏色，只需使用逗號(hào)分隔符將顏色添加到另一個(gè)顏色旁邊，并讓瀏覽器確定每個(gè)顏色的停止位置。

1  div {

2  background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);

3  }

上面的代碼片段將創(chuàng)建下面的彩虹。

瀏覽器兼容性

不幸的是，在撰寫本文時(shí)，所有當(dāng)前的瀏覽器都還沒有支持標(biāo)準(zhǔn)語法。他們?nèi)匀恍枰獜S商前綴(-webkit-、-moz-、-ms-和-o-)。所以，這就是為什么完整的語法看起來是這樣的：

1  div {

2  background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

3  background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

4  background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

5  background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

6  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

7  }

另一方面，Internet Explorer，特別是版本9或更低的版本，離標(biāo)準(zhǔn)還很遠(yuǎn)。在IE9和以下的漸變是用過濾器聲明的，所以如果我們想在那些瀏覽器上添加漸變，我們必須這樣寫；

1  div {

2 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00,endColorstr=#FFAE00);

3  }

這個(gè)濾鏡有它的局限性：首先，它不允許添加超過三種顏色，創(chuàng)建透明效果也有點(diǎn)棘手——它不允許rgba，但I(xiàn)E濾鏡使用#ARGB；

1  div {

2  ilter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00,endColorstr=#33FFAE00);

3  }

這是一個(gè)幫助你將rgba轉(zhuǎn)換成#ARGB的工具。

更快地編寫語法

正如您在上面看到的，為了保持跨瀏覽器的梯度兼容性，我們需要添加5行代碼，這是低效的。

我們有很多方法可以簡(jiǎn)化任務(wù)；例如使用無前綴，前綴，LESS或Sass來幫助編譯代碼，但最重要的是，我們建議使用這個(gè)工具，ColorZilla Gradient。該工具將簡(jiǎn)單地生成漸變?cè)谒袨g覽器中工作所需的所有代碼。

最后

今天我們已經(jīng)討論了很多關(guān)于創(chuàng)建漸變的內(nèi)容，我們已經(jīng)研究了語法的每個(gè)部分，創(chuàng)建透明的效果和維護(hù)瀏覽器的兼容性。所以，在這一點(diǎn)上，我們希望你已經(jīng)有一個(gè)更好的理解這個(gè)主題。