但是美中不足的時，各瀏覽器雖然支援css3的gradient，卻不能達成統一意見，完美的寫法是在gradient前加上各瀏覽器的字首，如-webkit-，-moz -，ie8以上瀏覽器可通過ie自帶的濾鏡實現漸變功能。儘管如此，像低於ie8瀏覽器的這些古董，雖然已被世界範圍內的市場淘汰，但作為中國的it程式設計師，我們依然不能放棄，因為ie6,7還佔據著中國的半壁江山，最後只能通過來實現。雖然這樣會對編碼的複雜度帶來一些影響，但是對於完美支援css3的瀏覽器還是會帶來全新的體驗。
一. webkit瀏覽器
(1) 第一種寫法：
background:-webkit-gradient(linear ,10% 10%，100% 100%，color-stop(0.14,rgb(255,0,0)), color-stop(0.5,rgb(255,255,0)), color-stop(1,rgb(0,0,255)) );
第乙個引數：表示的是漸變的型別
linear線性漸變
第二個引數：分別對應x，y方向漸變的起始位置
第三個引數：分別對應x，y方向漸變的終止位置
第四/五/n個引數：設定漸變的位置及顏色
(2)第二種寫法：這種寫法比較簡單，而且效果比較自然
background:-webkit-gradient(linear, 0 0, 0 100%, from(＃2074af), to(＃2c91d2));
第乙個引數：表示的是漸變的型別
linear線性漸變
第二個引數：分別對應x，y方向漸變的起始位置
第三個引數：分別對應x，y方向漸變的終止位置
第四個引數：設定了起始位置的顏色
第五個引數：設定了終止位置的顏色
二.mozilla瀏覽器
(1)第一種寫法：
background:-moz-linear-gradient(10 10 90deg, rgb(25,0,0) 14%, rgb(255,255,0) 50%, rgb(0,0,255) 100%);
第乙個引數：設定漸變起始位置及角度
第二/三/四/n個引數：設定漸變的顏色和位置
(2)第二種寫法：這種寫法比較簡單，而且效果比較自然
background:-moz-linear-gradient(top, ＃ffc3c8,＃ff9298);
第乙個引數：設定漸變的起始位置
第二個引數：設定起始位置的顏色
第三個引數：設定終止位置的顏色
三.ie 瀏覽器
ie瀏覽器實現漸變只能使用ie自己的濾鏡去實現
ie9 filter:progid:dximagetransform.microsoft.gradient(startcolorstr=＃00ffff,endcolorstr=＃9fffff,grandienttype=1);
ie8 -ms-filter:progid:dximagetransform.microsoft.gradient(startcolorstr=＃00ffff,endcolorstr=＃9fffff,grandienttype=1);
第乙個引數：漸變起始位置的顏色
第二個引數：漸變終止位置的顏色
第三個引數：漸變的型別
0 代表豎向漸變 1 代表橫向漸變
p.s.這裡設定背景的時候不需要給background設定，直接用filter即可，不要和其他的瀏覽器混淆
gradient中除了線性漸變linear以外，還有一種徑向漸變radial，但是徑向漸變應用的地方很少，我在專案開發中到現在還沒用過，關於gradient漸變，給大家推薦乙個**：
css3背景色過渡
css高階 背景顏色徑向漸變 背景顏色線性漸變 過渡背景顏色徑向漸變 徑向漸變 中間部分橢圓形，四周填充 由中間到四周漸變 background radial gradient red,yellow 紅橢圓填充黃色 background radial gradient circle,red,yell...
css設定背景色漸變
瀏覽器字首 background linear gradient red,blue background webkit linear gradient red,blue background o linear gradient red,blue background moz linear gradi...
css 背景色漸變相容寫法
css3 linear gradient 比如 黑色漸變到白色，如下 gradient 說明 linear gradient 具體用法。ie 濾鏡 filter linear gradient 在 ie9 以下是不支援的，所以對於 ie6 ie8 我們可以使用濾鏡來解決，如下 gradient 由於...