漸變就是多種顏色混合而成的效果，css3要實現漸變，就必須使用漸變函式來設定background或則background-imge屬性。同時為了相容各個瀏覽器（ie，safari，chrome，firefox），還需要新增對應的帶開發商字首的漸變
1，線性漸變
a,使用linear-gradient（）函式可以建立漸變
b,設定多個顏色漸變
c,使用漸變點（gradient stop）控制每個顏色的起點
每個漸變點用百分比值表示，0%是整個漸變的起點，100%是整個漸變的終點。下面樣例把橙色和黃色的範圍擴充套件到了中間：
#div1（1）使用radial-gradient()函式建立放射性漸變
第乙個引數 circle 表示圓形漸變。下面這個放射性漸變其圓心是白色，然後逐漸過渡到圓周的淡藍色：
#div1#div1下面使用 at 關鍵字告訴瀏覽器開始的位置離左邊緣70%，離上邊緣30%
#div1linear-gradient() 和 radial-gradient() 只能將設定的顏色漸變一次。
而 repeating-linear-gradient() 和 repeating-radial-gradient() 會以相同的顏色順序進行不斷地迴圈，直到顏色條紋填滿元素。
迴圈漸變函式語法基本上與普通漸變一樣。唯一不同的是，我們需要確保限制了漸變的大小（即最後乙個顏色包含乙個百分比或畫素值），以便其可以迴圈。
（1）使用百分比限制漸變大小
下面樣例中心顏色是白色，設定漸變淡藍色在10%的位置就結束。然後漸變迴圈，又以白色開始。
#div1下面樣例不管容器大小如何變化，每個條紋都有固定一樣的寬度（30px）
#div1上面的樣例，漸變都是通過 background 屬性實現的。實際上，對 background-image 屬性使用同樣的漸變函式也可以達到相同的目的。
它們的區別是，使用 background 屬性可以使用純色作為後備：
#div1#div1我們可以獲得我們想要的漸變色
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...
CSS3實現背景顏色漸變
css漸變色概念 css漸變色 gradients 能讓我們用一種顏色漸變的效果修飾乙個空間 從一種顏色過渡到另外一種顏色 填充這個空間。漸變色有兩個形式 linear 線性漸變 和radial 環形漸變 很顯然css漸變色 gradients 技術是產生了一種視覺圖案效果，而實現這種視覺效果很簡單...