css3中背景顏色漸變（轉）

原文鏈接：http://caibaojian.com/css3-background-gradient.html

整理一下關於css3背景漸變的寫法，至於是怎么來的，可以看下面漸變的詳細解釋。

via在項目中，有很多地方都用到了背景線性漸變。如果在移動端還可以適當使用CSS3這個屬性原文來自：http://caibaojian.com/css3-background-gradient.html

css3：linear-gradient

比如：黑色漸變到白色，代碼如下：

.gradient{
    background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}

說明：linear-gradient 具體用法點此進入。

ie 濾鏡：filter

linear-gradient 在 ie9 以下是不支持的，所以對於 ie6 - ie8 我們可以使用濾鏡來解決，代碼如下：

//code from http://caibaojian.com/css3-background-gradient.html
.gradient{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}

由於 filter 是 ie 的私有屬性，所以我們需要針對 ie9 單獨處理濾鏡效果，代碼如下：

:root {filter:none;}

總結：

綜上所述，線性漸變的兼容寫法如下：

.gradient{
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
:root .gradient{filter:none;}

PS：

在實際的項目中，往往會碰到圓角和漸變的組合，如果使用上面的寫法，那么在 ie9 下會有 bug（在 ie9 下背景色不能完全切完），解決方法是SVG，具體點此查看。

Webkit

盡管Mozilla和Webkit通常對CSS3屬性采取同樣的語法，但是對於漸變，他們很不幸的不能達成一致。Webkit是第一個支持漸變的瀏覽器內核，它使用下面的結構：

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
/* 實際用法... */
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略微不同的語法。

/* 語法，參考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */ -moz-linear-gradient( [
<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

/* 實際用法*/
background: -moz-linear-gradient(top, red, blue);

• 請注意我們將漸變的類型——linear——放到了屬性前綴中了
• 漸變從哪里開始? (top – 我們也可以使用度數，比如-45deg)
• 開始的顏色? (red)
• 結束的顏色? (blue)

Color-Stops

如果你不需要從一個顏色到另一個顏色的100%漸變怎么辦？這就是color stop起作用的時候了。一個普遍的設計技術是使用一個較短而細微的漸變，比如：

注意頂部的淺灰色到白色的細小的漸變

在過去，標准的做法就是制作一個圖片，並將其設為一個元素的背景圖片，然后讓其水平平鋪。然而使用CSS3，這是個小Case。

background: white; /* 為較舊的或者不支持的瀏覽器設置備用屬性 */
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; /* 備用屬性 */
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 */

PS：事實上，我們在《RGBa色彩的瀏覽器支持》提到的IE的解決方法，就是使用這個漸變濾鏡。

關於CSS漸變的一些要點：

• 盡可能的使用它。如果讓IE用戶看到一個固定的純色，我鼓勵你使用這種方法；
• IE6/7/8, Opera, Safari 3, 和Firefox 3 不能渲染CSS3 漸變，Firefox 和Safari用戶通常經常升級瀏覽器，而Chrome的自動升級機制會在后台自動升級，所以這並不是個大問題；
• 總是為不支持這些瀏覽器私有屬性的瀏覽器應用一個默認的，純色背景；
• 永遠不要使用紅色到藍色的漸變，就像我用作例子的這種；
• 頁面無須在每個瀏覽器里面看起來完全一樣！
• Firefox可以使用角度來設定漸變的方向，而webkit只能使用x和y軸的坐標。

漸變可以創建類似於彩虹的效果，低版本的瀏覽器不的不使開發者用圖片來實現，CSS3將會輕松實現網頁漸變效果。

要得上面的線性漸變效果，我們這樣去定義CSS3樣式：

background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/

-moz-linear-gradient有三個參數。第一個參數表示線性漸變的

看下面這種簡單的理解

一. 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即可，不要和其他的瀏覽器混淆

閱讀更多：

CSS背景顏色透明

CSS背景透明層加文字解決方案

CSS linear-gradient()_CSS手冊

css3盒子陰影box-shadow

50個有用的CSS代碼片段