一. 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自己的濾鏡去實現
filter:progid:dximagetransform.microsoft.gradient(startcolorstr=＃00ffff,endcolorstr=＃9fffff,grandienttype=1);
第乙個引數：漸變起始位置的顏色
第二個引數：漸變終止位置的顏色
第三個引數：漸變的型別
0 代表豎向漸變
1 代表橫向漸變
p.s.這裡設定背景的時候不需要給background設定，直接用filter即可，不要和其他的瀏覽器混淆
CSS3實現背景顏色漸變
css漸變色概念 css漸變色 gradients 能讓我們用一種顏色漸變的效果修飾乙個空間 從一種顏色過渡到另外一種顏色 填充這個空間。漸變色有兩個形式 linear 線性漸變 和radial 環形漸變 很顯然css漸變色 gradients 技術是產生了一種視覺圖案效果，而實現這種視覺效果很簡單...
css3 顏色 背景 漸變
漸變放在 css裡的語句 一定要按這個順序排，才不會出錯。否則 有的瀏覽器會不正常，今天本來調好了，發現ie9不行，搞了半天不行，崩潰了 最後準備還是使用背景算了 最後一次 測試，終於搞定 background moz linear gradient top,fefefe,d3ecff moz火狐 ...
CSS3背景顏色漸變效果
1 firefox瀏覽器 background image moz linear gradient top eef9fe,d1ecff 2 safari chrome瀏覽器 background image webkit gradient linear,50 0 50 100 from eef9fe...