來自：
為了顯示乙個漸變而專門製作乙個的做法是不靈活的，而且很快會成為一種不好的做法。但是遺憾的是，截至寫這篇文章，可能還必須這樣做，但是希望不會持續太久。多虧firefox 和safari/chrome，我們現在可以使用最少的努力實現強大的漸變。在本文中，我們將展示css漸變的簡單實現以及該屬性在mozilla和webkit核心瀏覽器中的不同。
webkit
儘管mozilla和webkit通常對css3屬性採取同樣的語法，但是對於漸變，他們很不幸的不能達成一致。webkit是第乙個支援漸變的瀏覽器核心，它使用下面的結構：
/* syntax, taken from: */
-webkit-gradient(, [, ]?, [, ]? [, ]*)
/* in practice... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
不要擔心這些語法會讓你看花眼，我也是這樣的！只要記得我們需要用乙個逗號來隔開這個引數組。
漸變的型別? (linear) 漸變開始的x y 軸座標(0 0 – 或者left-top) 漸變結束的x y 軸座標(0 100% 或者left-bottom) 開始的顏色? (from(red)) 結束的顏色? (to(blue)) mozilla
firefox，從3.6版本才開始支援漸變，更喜歡和webkit略微不同的語法。
/* syntax, taken from: */
-moz-linear-gradient( [|| ,]? , [, ]* )
/* in practice */
background: -moz-linear-gradient(top, red, blue);
請注意我們將漸變的型別——linear——放到了屬性字首中了 漸變從**開始? (top – 我們也可以使用度數，比如-45deg) 開始的顏色? (red) 結束的顏色? (blue) color-stops
如果你不需要從乙個顏色到另乙個顏色的100%漸變怎麼辦？這就是color stop起作用的時候了。乙個普遍的設計技術是使用乙個較短而細微的漸變，比如：
注意頂部的淺灰色到白色的細小的漸變
在過去，標準的做法就是製作乙個，並將其設為乙個元素的背景，然後讓其水平平鋪。然而使用css3，這是個小case。
background: white; /* fallback for older/unsupporting browsers */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
border-top: 1px solid white;
這次，我們讓漸變結束於8%，而不是預設的100%。請注意我們也在頭部採用了乙個邊框，以形成對比。這很常用。
如果我們想要新增多一種(幾種)顏色，我們可以這樣做：
background: white; /* fallback for older/unsupporting browsers */
background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);
對於-moz 版本，我們定義，從元素的20%的高度的地方開始是紅色。 而對於-webkit，我們使用color-stop，採用兩個引數：**開始停止，使用哪種顏色。 ie
ie並不支援css漸變，但是提供了漸變濾鏡，可以實現最簡單的漸變效果：
filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffff', endcolorstr='#ff0000'); /* ie6,ie7 */
-ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffff', endcolorstr='#ff0000')"; /* ie8 */
關於css漸變的一些要點：盡可能的使用它。如果讓ie使用者看到乙個固定的純色，我鼓勵你使用這種方法； ie6/7/8, opera, safari 3, 和firefox 3 不能渲染css3 漸變，firefox 和safari使用者通常經常公升級瀏覽器，而chrome的自動公升級機制會在後台自動公升級，所以這並不是個大問題； 總是為不支援這些瀏覽器私有屬性的瀏覽器應用乙個預設的，純色背景； 永遠不要使用紅色到藍色的漸變，就像我用作例子的這種；頁面無須在每個瀏覽器裡面看起來完全一樣！firefox可以使用角度來設定漸變的方向，而webkit只能使用x和y軸的座標。
構建顏色漸變的網頁背景（HTML JS）
之前做乙個介面時，想到用顏色漸變的做背景，剛好在html的書中，看到了可以使用標籤來實現。在這裡就直接上 了。lang en charset utf 8 name generator content editplus name author content name keywords content...
Google Chrome修改網頁背景顏色的辦法
1 在chrome web store 裡搜多stylist外掛程式並安裝 2工具 擴充套件程式找到stylist 點選項進行設定 如下圖所示 點styles 再點demo 選擇all site 再把這段 貼上在下面就行了 其中 c7edcc為你要設定的顏色 你可以設定任意顏色 這個顏色是看別人這樣...
網頁背景色漸變效果
背景色漸變 引數說明 gradienttype為漸變型別，0為上下漸變，1為左右漸變 startcolorstr為開始顏色 endcolorstr為結束顏色 背景色透明 背景圖漸變 01 白色 ffffff 18 紅色 ff0000 35 綠色 00ff00 02 牡丹紅 ff00ff 19 青色 ...