漸變是CSS3中很棒的色彩功能，它不僅可以只添加一種顏色，還可以在一個聲明塊中添加多種顏色組合，而無需依賴圖像，這可以減少我們網站中的HTTP請求，從而使網站加載速度更快。
如果您在CSS3中使用過漸變，那么您可能熟悉兩種方法：徑向漸變和線性漸變。今天的文章主要討論后者。
創建漸變
正如規范中所說，CSS3中的漸變是一個圖像，它不像其他新添加的特性那樣具有特殊屬性，所以它是使用background-image屬性聲明的。
如果我們看一下漸變的完整語法，它看起來有點臃腫，這可能會導致一些人的困惑。
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 }
所以，讓我們一個一個深入到語法的每一部分，使事情更清楚。
首先，使用linear-gradient()函數聲明線性梯度，該函數有三個主要值。第一個值定義了漸變的起始位置，你可以使用一個描述性的關鍵字，如頂部開始梯度流動從頂部；
1 div {
2 background-image: linear-gradient(top, #FF5A00, #FFAE00);
3 }
上面的代碼片段是W3C創建漸變的官方版本，它實際上更簡單，也很容易理解，它還會創建如下漸變。
你也可以使用底部來做相反的事情，或者左右移動。
我們還可以創建一個對角梯度使用角度作為梯度的起始位置。下面是一個例子：
1 div {
2 background-image: linear-gradient(45deg, #FF5A00, #FFAE00);
3 }
上面的代碼段將創建以下顏色漸變：
函數的第二個值將告訴第一個顏色信息及其以百分比表示的停止位置，停止位置實際上是可選的；瀏覽器非常聰明，可以確定正確的位置，所以當我們不指定第一個顏色的停止時，瀏覽器將默認為0%。
下一個值是第二個顏色組合。它的工作方式與之前的值類似，只是如果它是最后應用的顏色，并且我們沒有指定停止位置，那么將使用100%作為默認值?，F在，讓我們看看下面的例子：
1 div {
2 background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
3 }
上面的代碼段將創建一個漸變，就像我們之前看到的那樣(沒有區別)，但現在我們指定顏色停止位置；
現在讓我們改變顏色停止，這次我們將為第一種顏色指定50%為第二種顏色指定51%，讓我們看看結果如何；
1 div {
2 background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);
3 }
透明度
在漸變中創建透明度也是可能的，為了創建效果，我們需要將顏色十六進制轉換為rgba模式，并降低alpha通道。
1 div {
2 background-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));
3 }
上面的代碼段將顏色強度降低20%，漸變效果如下：
多種顏色
如果您希望添加更多的顏色，只需使用逗號分隔符將顏色添加到另一個顏色旁邊，并讓瀏覽器確定每個顏色的停止位置。
1 div {
2 background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
3 }
上面的代碼片段將創建下面的彩虹。
瀏覽器兼容性
不幸的是，在撰寫本文時，所有當前的瀏覽器都還沒有支持標準語法。他們仍然需要廠商前綴(-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或更低的版本，離標準還很遠。在IE9和以下的漸變是用過濾器聲明的，所以如果我們想在那些瀏覽器上添加漸變，我們必須這樣寫；
1 div {
2 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00,endColorstr=#FFAE00);
3 }
這個濾鏡有它的局限性：首先，它不允許添加超過三種顏色，創建透明效果也有點棘手——它不允許rgba，但IE濾鏡使用#ARGB；
1 div {
2 ilter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00,endColorstr=#33FFAE00);
3 }
這是一個幫助你將rgba轉換成#ARGB的工具。
更快地編寫語法
正如您在上面看到的，為了保持跨瀏覽器的梯度兼容性，我們需要添加5行代碼，這是低效的。
我們有很多方法可以簡化任務；例如使用無前綴，前綴，LESS或Sass來幫助編譯代碼，但最重要的是，我們建議使用這個工具，ColorZilla Gradient。該工具將簡單地生成漸變在所有瀏覽器中工作所需的所有代碼。
最后
今天我們已經討論了很多關于創建漸變的內容，我們已經研究了語法的每個部分，創建透明的效果和維護瀏覽器的兼容性。所以，在這一點上，我們希望你已經有一個更好的理解這個主題。
