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代碼片斷