石家莊高端網(wǎng)站開(kāi)發(fā) CSS3線性漸變指南 漸變是CSS3中很棒的色彩功能?，F(xiàn)在，我們不僅可以添加一種顏色，還可以在一個(gè)聲明塊中添加多種顏色組合，而無(wú)需依賴(lài)圖像，這可以減少我們網(wǎng)站中的HTTP請(qǐng)求，從而使網(wǎng)站加載速度更快。
如果您在CSS3中使用過(guò)漸變，則您可能熟悉兩種方法：徑向漸變和線性漸變。今天的帖子將是關(guān)于后者的。
創(chuàng)建漸變
正如規(guī)范說(shuō)的，CSS3中的漸變是一幅圖像，它沒(méi)有像其他新功能一樣具有特殊的屬性，因此它是使用background-image屬性來(lái)聲明的。
如果我們看一下漸變的完整語(yǔ)法，它看起來(lái)有點(diǎn)用力過(guò)度，這可能會(huì)導(dǎo)致某些人感到困惑。
div {
background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}
因此，讓我們一一深入研究語(yǔ)法的每個(gè)部分，以使事情變得更清楚。
首先，使用linear-gradient()函數(shù)聲明線性梯度。該函數(shù)具有三個(gè)主要值。第一個(gè)值定義梯度的起始位置。您可以使用描述性關(guān)鍵字，例如top從頂部開(kāi)始漸變；
1個(gè)
2
3
div {
background-image: linear-gradient(top, #FF5A00, #FFAE00);
}
上面的代碼段是W3C用來(lái)創(chuàng)建漸變的正式版本。它實(shí)際上更簡(jiǎn)單，也很容易解釋?zhuān)⑶疫€會(huì)創(chuàng)建以下漸變。
石家莊高端網(wǎng)站開(kāi)發(fā)漸變頂部
您也可以使用bottom相反的方法，否則使用rightand left。
我們還可以使用對(duì)角線漸變angle degree作為起始位置來(lái)創(chuàng)建對(duì)角線漸變。這是一個(gè)例子：
1個(gè)
2
3
div {
background-image: linear-gradient(45deg, #FF5A00, #FFAE00);
}
上面的代碼段將創(chuàng)建以下顏色漸變：
斜對(duì)角線
函數(shù)的第二個(gè)值將告訴第一個(gè)顏色信息及其停止位置，以百分比表示。停止位置實(shí)際上是可選的；瀏覽器足夠聰明來(lái)確定正確的位置，因此當(dāng)我們不指定第一種顏色的停止位置時(shí)，瀏覽器將0%作為默認(rèn)顏色。
并且，下一個(gè)值是第二個(gè)顏色組合。它的工作方式與之前的值相同，僅當(dāng)它是最后應(yīng)用的顏色且我們未指定停止位置時(shí)，才將值100%用作默認(rèn)值?，F(xiàn)在，讓我們看下面的示例：
1個(gè)
2
3
div {
background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}
上面的代碼段將創(chuàng)建一個(gè)漸變，就像我們之前看到的一樣（沒(méi)有區(qū)別），但是現(xiàn)在我們指定了顏色停止位置；
石家莊高端網(wǎng)站開(kāi)發(fā)漸變頂部
現(xiàn)在讓我們更改顏色stop，這一次我們將指定50%第一種顏色和51%第二種顏色，然后看看結(jié)果如何。
1個(gè)
2
3
div {
background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);
}
梯度停止
透明度
transparency也可以漸變創(chuàng)建。要?jiǎng)?chuàng)建效果，我們需要將顏色hex轉(zhuǎn)換為rgba模式并降低Alpha通道。
1個(gè)
2
3
div {
background-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));
}
上面的代碼段會(huì)將色彩強(qiáng)度降低20%，漸變會(huì)像這樣：
漸變透明
多種顏色
如果要添加更多顏色，只需用逗號(hào)定界符在其他顏色旁邊添加顏色，然后讓瀏覽器確定每種顏色的停止位置。
1個(gè)
2
3
div {
background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
}
上面的代碼段將創(chuàng)建以下彩虹。
瀏覽器兼容性
不幸的是，在撰寫(xiě)本文時(shí)，當(dāng)前所有的瀏覽器都尚未支持標(biāo)準(zhǔn)語(yǔ)法。他們還需要供應(yīng)商前綴（-webkit-，-moz-，-ms-和-o-）。因此，這就是為什么完整的語(yǔ)法如下所示：
div {
background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}
另一方面，Internet Explorer（特別是版本9和更低版本）與標(biāo)準(zhǔn)相差甚遠(yuǎn)。IE9及更低版本中的漸變用聲明filter，因此，如果要在這些瀏覽器上添加漸變，則必須編寫(xiě)如下代碼；
1個(gè)
2
3
div {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00);
}
它filter有其局限性：首先，它不允許添加三種以上的顏色，并且創(chuàng)建透明效果也有些棘手-不允許rgba，但是IE filter使用#ARGB；
1個(gè)
2
3
div {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00, endColorstr=#33FFAE00);
}
這里是為了幫助一個(gè)工具，你轉(zhuǎn)換rgba到#ARGB。
演示版
下載源
更快地編寫(xiě)語(yǔ)法
如您在上面看到的，為了保持跨瀏覽器的梯度兼容性，我們需要再添加五行效率低下的代碼。
我們可以采取許多方法來(lái)簡(jiǎn)化任務(wù)。例如使用Prefix-free，Prefixr，LESS或Sass來(lái)幫助編譯代碼，但最重要的是，我們建議使用ColorZilla Gradient這個(gè)工具。該工具將簡(jiǎn)單地生成漸變所需的所有代碼，以使其在所有瀏覽器中均有效。
最后的話
今天，我們?cè)趧?chuàng)建漸變方面進(jìn)行了很多討論，我們研究了語(yǔ)法的每個(gè)部分，創(chuàng)建透明效果并保持了瀏覽器兼容性。因此，在這一點(diǎn)上，我們希望您已經(jīng)對(duì)該主題有了更好的理解。
我們計(jì)劃在以后的文章中仍然打算在CSS3 Gradients上探索很多東西，所以請(qǐng)繼續(xù)關(guān)注Hongkiat.com。最后，感謝您閱讀本文，我們希望您喜歡它。
