為了顯示乙個漸變而專門製作乙個的做法是不靈活的，而且很快會成為一種不好的做法。但是遺憾的是，截至寫這篇文章，可能還必須這樣做，但是希望不會持續太久。多虧firefox 和safari/chrome，我們現在可以使用最少的努力實現強大的漸變。在本文中，我們將展示css漸變的簡單實現以及該屬性在mozilla和webkit核心瀏覽器中的不同。
webkit
儘管mozilla和webkit通常對css3屬性採取同樣的語法，但是對於漸變，他們很不幸的不能達成一致。webkit是第乙個支援漸變的瀏覽器核心，它使用下面的結構：
css code複製內容到剪貼簿
不要擔心這些語法會讓你看花眼，我也是這樣的！只要記得我們需要用乙個逗號來隔開這個引數組。
漸變的型別? (linear)
漸變開始的x y 軸座標(0 0 – 或者left-top)
漸變結束的x y 軸座標(0 100% 或者left-bottom)
開始的顏色? (from(red))
結束的顏色? (to(blue))
mozilla
firefox，從3.6版本才開始支援漸變，更喜歡和webkit略微不同的語法。
css code複製內容到剪貼簿
請注意我們將漸變的型別——linear——放到了屬性字首中了
漸變從**開始? (top – 我們也可以使用度數，比如-45deg)
開始的顏色? (red)
結束的顏色? (blue)
color-stops
如果你不需要從乙個顏色到另乙個顏色的100%漸變怎麼辦？這就是color stop起作用的時候了。乙個普遍的設計技術是使用乙個較短而細微的漸變，比如：
注意頂部的淺灰色到白色的細小的漸變
在過去，標準的做法就是製作乙個，並將其設為乙個元素的背景，然後讓其水平平鋪。然而使用css3，這是個小case。
css code複製內容到剪貼簿
這次，我們讓漸變結束於8%，而不是預設的100%。請注意我們也在頭部採用了乙個邊框，以形成對比。這很常用。
如果我們想要新增多一種(幾種)顏色，我們可以這樣做：
css code複製內容到剪貼簿
對於-moz 版本，我們定義，從元素的20%的高度的地方開始是紅色。
而對於-webkit，我們使用color-stop，採用兩個引數：**開始停止，使用哪種顏色。
本文標題: css3中線性顏色漸變的一些實現方法
本文位址:
CSS3中顏色線性漸變實戰
線性漸變可以設定3個引數值 方向 起始顏色 結束顏色。最簡單的模式只需要定義起始顏色和結束顏色，起點 終點和方向預設自元素的頂部到底部。下面舉例說明 css code複製內容到剪貼簿 上述 的效果如圖所示。最簡單的線性漸變效果 如果要在一些舊版本的瀏覽器 除ie 下可以正常顯示如圖5.9的效果，則需...
css3的線性漸變
這種漸變你必須定義至少兩種顏色，也就是說可以更多種甚至不限制數量。語法如下 background strong linear gradient direction,color stop1,color stop2,第乙個引數為方向，如果我們不指定，那麼預設為從上到下。第乙個顏色引數即為開始的第乙個顏色...
CSS3中顏色漸變色彩
css3 gradient分為線性漸變 linear 和徑向漸變 radial 由於不同的渲染引擎實現漸變的語法不同，這裡我們只針對線性漸變的 w3c 標準語法來分析其用法，其餘大家可以查閱相關資料。w3c 語法已經得到了 ie10 firefox19.0 chrome26.0 和 opera12....