CSS3線性漸變linear-gradient

轉自 http://www.w3cplus.com/content/css3-gradient

 

CSS3的線性漸變

1、線性漸變在Mozilla下的應用

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

　　

參數：其共有三個參數，第一個參數表示線性漸變的方向，top是從上到下、left是從左到右，若是定義成left top，那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還能夠在它們之間插入更多的參數，表示多種顏色的漸變。如圖所示：

2、線性漸變在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爲結束點；第二個表示該點的顏色。如圖所示：

 

 

3、線性漸變在Opera下的應用

-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */

　　

參數：-o-linear-gradient有三個參數。第一個參數表示線性漸變的方向，top是從上到下、left是從左到右，若是定義成left top，那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還能夠在它們之間插入更多的參數，表示多種顏色的漸變。（注：Opera支持的版本有限，本例測試都是在Opera11.1版本下）

4、線性漸變在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表示水平漸變。

 

漸變上應用透明─透明度(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);