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程式碼片段

css3中背景色彩坡形（轉）