CSS3 Gradient分爲linear-gradient(線性漸變)和radial-gradient(徑向漸變)。而我們今天主要是針對線性漸變來剖析其具體的用法。爲了更好的應用CSS3 Gradient,我們需要先了解一下目前的幾種現代瀏覽器的內核,主流內容主要有Mozilla(熟悉的有Firefox,Flock等瀏覽器)、WebKit(熟悉的有Safari、Chrome等瀏覽器)、Opera(Opera瀏覽器)、Trident(討厭的IE瀏覽器)。本文照常忽略IE不管,我們主要看看在Mozilla、Webkit、Opera下的應用,當然在IE下也可以實現,他需要通過IE特有的濾鏡來實現,在後面會列出濾鏡的使用語法,但不會具體介紹如何實用,感興趣的可以搜索相關技術文檔。那我們瞭解了這些,現在就開始今天的主題吧。
CSS3的線性漸變
一、線性漸變在Mozilla下的應用
語法:
-
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
複製代碼
參數:其共有三個參數,第一個參數表示線性漸變的方向,top是從上到下、left是從左到右,如果定義成left top,那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的參數,表示多種顏色的漸變。如圖所示:
根據上面的介紹,我們先來看一個簡單的例子:
HTML:
-
<div class="example example1"></div>
複製代碼
CSS:
-
.example {
-
width: 150px;
-
height: 80px;
-
}
複製代碼
(如無特殊說明,我們後面的示例都是應用這一段html和css 的基本代碼)
現在我們給這個div應用一個簡單的漸變樣式:
-
.example1 {
-
background: -moz-linear-gradient( top,#ccc,#000);
-
}
複製代碼
效果如下:
注:這個效果暫時只有在Mozilla內核的瀏覽器下才能正常顯示。
二、線性漸變在Webkit下的應用
語法:
-
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新發布書寫語法
-
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式語法書寫規則
複製代碼
參數:-webkit-gradient是webkit引擎對漸變的實現參數,一共有五個。第一個參數表示漸變類型(type),可以是linear(線性漸變)或者radial(徑向漸變)。第二個參數和第三個參數,都是一對值,分別表示漸變起點和終點。這對值可以用座標形式表示,也可以用關鍵值表示,比如 left top(左上角)和left bottom(左下角)。第四個和第五個參數,分別是兩個color-stop函數。color-stop函數接受兩個參數,第一個表示漸變的位置,0爲起點,0.5爲中點,1爲結束點;第二個表示該點的顏色。如圖所示:
三、線性漸變在Opera下的應用
語法:
-
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */
複製代碼
參數:-o-linear-gradient有三個參數。第一個參數表示線性漸變的方向,top是從上到下、left是從左到右,如果定義成left top,那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的參數,表示多種顏色的漸變。(注:Opera支持的版本有限,本例測試都是在Opera11.1版本下,後面不在提示),如圖所示:
示例:
-
background: -o-linear-gradient(top,#ccc, #000);
複製代碼
效果如下:
四、線性漸變在Trident (IE)下的應用
語法:
-
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
複製代碼
IE依靠濾鏡實現漸變。startColorstr表示起點的顏色,endColorstr表示終點顏色。GradientType表示漸變類型,0爲缺省值,表示垂直漸變,1表示水平漸變。如圖所示:
上面我們主要介紹了線性漸變在上述四大核心模塊下的實現方法,接着我們主要針對線性漸變在MOZ、Webkit、Opera三大模塊下實現各種不同線性漸變實例:
從上面的語法中我們可以很清楚的知道,要創建一個線性漸變,我們需要創建一個起點和一個漸變方向(或角度),定義一個起始色:
-
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-
-o-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
複製代碼
具體應用如下:
-
background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
-
background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
-
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
-
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/
複製代碼
效果如下:
起始點(Starting Point)的工作方式類似於background position。您可以設置水平和垂直位置爲百分比,或以像素爲單位,或在水平方向上可以使用left/center/right,在垂直方向上可以使用top/center/bottom。位置起始於左上角。如果你不指定水平或垂直位置,它將默認爲center。其工作方式主要包含:Top
→ Bottom、Left → Right、bottom → top、right → left等,接着我們主要一種一種來看其實現的效果:
1、開始於center(水平方向)和top(垂直方向)也就是Top → Bottom:
-
/* Firefox 3.6+ */
-
background: -moz-linear-gradient(top, #ace, #f96);
-
/* Safari 4-5, Chrome 1-9 */
-
/* -webkit-gradient(, [, ]?, [, ]? [, ]*) */
-
background: -webkit-gradient(linear,top,from(#ace),to(#f96));
-
/* Safari 5.1+, Chrome 10+ */
-
background: -webkit-linear-gradient(top, #ace, #f96);
-
/* Opera 11.10+ */
-
background: -o-linear-gradient(top, #ace, #f96);
複製代碼
效果:
2、始於left(水平方向)和center(垂直方向)也是就Left → Right:
-
/* Firefox 3.6+ */
-
background: -moz-linear-gradient(left, #ace, #f96);
-
/* Safari 5.1+, Chrome 10+ */
-
background: -webkit-linear-gradient(left, #ace, #f96);
-
/* Opera 11.10+ */
-
background: -o-linear-gradient(left, #ace, #f96);
複製代碼
效果如下:
3、起始於left(水平方向)和top(垂直方向):
-
background: -moz-linear-gradient(left top, #ace, #f96);
-
background: -webkit-linear-gradient(left top, #ace, #f96);
-
background: -o-linear-gradient(left top, #ace, #f96);
複製代碼
效果如下:
4、Linear Gradient (with Even Stops):
-
/* Firefox 3.6+ */
-
background: -moz-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
-
/* Safari 4-5, Chrome 1-9 */
-
background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.25, #f96), color-stop(0.5, #ace), color-stop(0.75, #f96), to(#ace));
-
/* Safari 5.1+, Chrome 10+ */
-
background: -webkit-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
-
/* Opera 11.10+ */
-
background: -o-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
複製代碼
效果如下:
5、角度(Angle):
正如上面看到的示例,如果您不指定一個角度,它會根據起始位置自動定義。如果你想更多的控制漸變的方向,您不妨設置角度試試。例如,下面的兩個漸變具有相同的起點left center,但是加上一個30度的角度。
沒有角度的示例代碼:
-
background: -moz-linear-gradient(left, #ace, #f96);
-
background: -webkit-linear-gradient(left,#ace,#f96);
-
background: -o-linear-gradient(left, #ace, #f96);
複製代碼
加上30度的角度代碼:
-
background: -moz-linear-gradient(left 30deg, #ace, #f96);
-
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#ace),to(#f96));
-
background: -o-linear-gradient(30deg, #ace, #f96);
複製代碼
效果圖如下:
當指定的角度,請記住,它是一個由水平線與漸變線產生的的角度,逆時針方向。因此,使用0deg將產生一個左到右橫向梯度,而90度將創建一個從底部到頂部的垂直漸變。我來看看你核心代碼:
-
background: -moz-linear-gradient(<angle>, #ace, #f96);
-
background: -webkit-gradient(<type>,<angle>, from(#ace), to(#f96));
-
background: -webkit-linear-gradient(<angle>, #ace, #f96);
-
background: -o-linear-gradient(<angle>, #ace, #f96);
複製代碼
我們來看看各角度的區別
-
.deg0 {
-
background: -moz-linear-gradient(0deg, #ace, #f96);
-
background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
-
background: -webkit-linear-gradient(0deg, #ace, #f96);
-
background: -o-linear-gradient(0deg, #ace, #f96);
-
}
-
-
.deg45 {
-
background: -moz-linear-gradient(45deg, #ace, #f96);
-
background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
-
background: -webkit-linear-gradient(45deg, #ace, #f96);
-
background: -o-linear-gradient(45deg, #ace, #f96);
-
}
-
.deg90 {
-
background: -moz-linear-gradient(90deg, #ace, #f96);
-
background: -webkit-gradient(linear,50% 100%,50% 0%,from(#ace),to(#f96));
-
background: -webkit-linear-gradient(90deg, #ace, #f96);
-
background: -o-linear-gradient(90deg, #ace, #f96);
-
}
-
.deg135 {
-
background: -moz-linear-gradient(135deg, #ace, #f96);
-
background: -webkit-gradient(linear,100% 100%,0 0,from(#ace),to(#f96));
-
background: -webkit-linear-gradient(135deg, #ace, #f96);
-
background: -o-linear-gradient(135deg, #ace, #f96);
-
}
-
.deg180 {
-
background: -moz-linear-gradient(180deg, #ace, #f96);
-
background: -webkit-gradient(linear,100% 50%,0 50%,from(#ace),to(#f96));
-
background: -webkit-linear-gradient(180deg, #ace, #f96);
-
background: -o-linear-gradient(180deg, #ace, #f96);
-
}
-
.deg225 {
-
background: -moz-linear-gradient(225deg, #ace, #f96);
-
background: -webkit-gradient(linear,100% 0%,0 100%,from(#ace),to(#f96));
-
background: -webkit-linear-gradient(225deg, #ace, #f96);
-
background: -o-linear-gradient(225deg, #ace, #f96);
-
}
-
.deg270 {
-
background: -moz-linear-gradient(270deg, #ace, #f96);
-
background: -webkit-gradient(linear,50% 0%,50% 100%,from(#ace),to(#f96));
-
background: -webkit-linear-gradient(270deg, #ace, #f96);
-
background: -o-linear-gradient(270deg, #ace, #f96);
-
}
-
.deg315 {
-
background: -moz-linear-gradient(315deg, #ace, #f96);
-
background: -webkit-gradient(linear,0% 0%,100% 100%,from(#ace),to(#f96));
-
background: -webkit-linear-gradient(315deg, #ace, #f96);
-
background: -o-linear-gradient(315deg, #ace, #f96);
-
}
-
.deg360 {
-
background: -moz-linear-gradient(360deg, #ace, #f96);
-
background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
-
background: -webkit-linear-gradient(360deg, #ace, #f96);
-
background: -o-linear-gradient(360deg, #ace, #f96);
-
}
複製代碼
效果如下:
6、漸變上應用透明─透明度(Transparency):
透明度還支持透明漸變。這對於製作一些特殊的效果是相當有用的,例如,當堆疊多個背景時。這裏是兩個背景的結合:一張圖片,一個白色到透明的線性漸變。我們來看一個官網的示例吧:
-
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
-
background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
-
background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
複製代碼
接着看看效果吧
CSS3的徑向漸變
CSS3的徑向漸變和其線性漸變是很相似的。我們首先來看其語法:
-
-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
-
-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
複製代碼
(需要特別說明一點的是,徑向漸變到目前還不支持Opera的內核瀏覽器,所以我們徑向漸變都是在firefox,safari,chrome底下進行測試完成的。)
除了您已經在線性漸變中看到的起始位置,方向,和顏色,徑向梯度允許你指定漸變的形狀(圓形或橢圓形)和大小(最近端,最近角,最遠端,最遠角,包含或覆蓋 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover))。 顏色起止(Color stops):就像用線性漸變,你應該沿着漸變線定義漸變的起止顏色。下面爲了更好的理解其具體的用法,我們主要通過不同的示例來對比CSS3徑向漸變的具體用法
-
background: -moz-radial-gradient(#ace, #f96, #1E90FF);
-
background: -webkit-radial-gradient(#ace, #f96, #1E90FF);
複製代碼
-
background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
-
background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
複製代碼
有關於CSS3漸變的東西就完了,大家看完了肯定會想,他主要用在哪些方面呢?這個說起來就多了,最簡單的就是製作背景,我們還可以應用其製作一些漂亮的按鈕,還可以用他來製作patterns,我在這裏列出幾種製作patterns的示例代碼吧:
HTML代碼:
-
<ul>
-
<li class="gradient gradient1"></li>
-
<li class="gradient gradient2"></li>
-
<li class="gradient gradient3"></li>
-
<li class="gradient gradient4"></li>
-
<li class="gradient gradient5"></li>
-
<li class="gradient gradient6"></li>
-
</ul>
複製代碼
CSS 代碼:
-
ul {
-
overflow: hidden;
-
margin-top: 20px;
-
}
-
li{
-
width: 150px;
-
height: 80px;
-
margin-bottom: 10px;
-
float: left;
-
margin-right: 5px;
-
background: #ace;
-
/*Controls the size*/
-
-webkit-background-size: 20px 20px;
-
-moz-background-size: 20px 20px;
-
background-size: 20px 20px;
-
}
-
-
li.gradient1 {
-
background-image: -webkit-gradient(
-
linear,
-
0 100%, 100% 0,
-
color-stop(.25, rgba(255, 255, 255, .2)),
-
color-stop(.25, transparent),
-
color-stop(.5, transparent),
-
color-stop(.5, rgba(255, 255, 255, .2)),
-
color-stop(.75, rgba(255, 255, 255, .2)),
-
color-stop(.75, transparent),
-
to(transparent)
-
);
-
background-image: -moz-linear-gradient(
-
45deg,
-
rgba(255, 255, 255, .2) 25%,
-
transparent 25%,
-
transparent 50%,
-
rgba(255, 255, 255, .2) 50%,
-
rgba(255, 255, 255, .2) 75%,
-
transparent 75%,
-
transparent
-
);
-
background-image: -o-linear-gradient(
-
45deg,
-
rgba(255, 255, 255, .2) 25%,
-
transparent 25%,
-
transparent 50%,
-
rgba(255, 255, 255, .2) 50%,
-
rgba(255, 255, 255, .2) 75%,
-
transparent 75%,
-
transparent
-
);
-
background-image: linear-gradient(
-
45deg,
-
rgba(255, 255, 255, .2) 25%,
-
transparent 25%,
-
transparent 50%,
-
gba(255, 255, 255, .2) 50%,
-
rgba(255, 255, 255, .2) 75%,
-
transparent 75%,
-
transparent
-
);
-
}
-
-
li.gradient2 {
-
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
-
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
-
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
-
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
-
to(transparent));
-
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
-
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
-
transparent 75%, transparent);
-
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
-
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
-
transparent 75%, transparent);
-
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
-
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
-
transparent 75%, transparent);
-
}
-
-
li.gradient3 {
-
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
-
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-
}
-
-
li.gradient4 {
-
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
-
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-
background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-
}
-
-
li.gradient5 {
-
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
-
background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);
-
background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-
-o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-
-o-linear-gradient(45deg, transparent 75%, #555 75%),
-
-o-linear-gradient(-45deg, transparent 75%, #555 75%);
-
background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-
linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-
linear-gradient(45deg, transparent 75%, #555 75%),
-
linear-gradient(-45deg, transparent 75%, #555 75%);
-
}
-
-
li.gradient6 {
-
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
-
-webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
-
background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-
-moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
-
background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-
-o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
-
background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-
linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
-
}
複製代碼
效果:
到此我們關於CSS3─Gradient就介紹到這裏了,希望能給大家對學習CSS3有點幫助,如果感興趣的朋友請觀注更新,從今天開始我會系統的介紹一些CSS3的應用,希望大家能喜歡,更希望能跟大家一起探討學習CSS3的相關技術。
注:IE9下的漸變色結合圓角製作的bug。換句話說:在IE9下你使用漸變色而且還需要製作圓角時,這個bug就出現了,在IE9下背景色不能完全切完。
解決代碼如下:
-
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
-
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjZTA2MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
-
background: -moz-linear-gradient(top, rgba(44,224,98,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,224,98,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
-
background: -webkit-linear-gradient(top, rgba(44,224,98,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
-
background: -o-linear-gradient(top, rgba(44,224,98,1) 0%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
-
background: -ms-linear-gradient(top, rgba(44,224,98,1) 0%,rgba(125,185,232,0) 100%); /* IE10+ */
-
background: linear-gradient(top, rgba(44,224,98,1) 0%,rgba(125,185,232,0) 100%); /* W3C */
-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ce062', endColorstr='#007db9e8',GradientType=0 ); /* IE6-8 */
-
filter: none\9\0;/*ie9*/