css線性漸變

css Gradient分爲linear-gradient(線性漸變)和radial-gradient(徑向漸變)

css線性漸變在webkit下的應用：

webkit是開源的瀏覽器引擎，與之相對應的引擎有Gecko（Mozilla Firefox等使用）和Trident（也稱MSHTML，IE使用）

  同時Webkit也是蘋果Mac OSX系統引擎架版本的名稱

1.語法：-moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*)

參數：其共有三個參數，第一個參數表示線性漸變的方向，top是從上到下，left是從左到右，若是定義成left top,那麼就是從 左上角到右下角。第二個和第三個參數分別是

起點的顏色和終點的顏色  ，還能夠在它們之間插入更多的參數，表示多種顏色漸變 

2.css在webkit下的應用 

語法：

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新發布書寫語法

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式語法書寫規則

參數：-webkit-gradient是webkit引擎對漸變實現的參數

 參數1：表示漸變的類型（type），也能夠是線性漸變(liner)或者徑向漸變(radial).

參數2和參數3，都是一對值，分別表示漸變的起點和終點，這對值能夠用座標的形式表示，也能夠用關鍵值表示，eg：好比 left top（左上角）和left bottom（左下角）。

參數4和參數5，分別是兩個color-stop函數。

color-stop函數接受兩個參數，第一個表示漸變的位置，0爲起點，0.5爲中點，1爲結束點；第二個表示該點的顏色

 

 

例子一：css代碼

 .example1{
            width: 100px;
            height: 100px; background: -webkit-linear-gradient(top,#ccc,#000);
        }

html

<div class="example1"></div>

效果：

注：在谷歌瀏覽器裏面不顯示效果，就用上面的方法

background: -moz-linear-gradient( top,#ccc,#000);

 3.線性漸變在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表示起點的顏色，endColor表示終點的顏色。GradientType表示漸變類型，0爲缺省值，表示垂直，1表示水平。

background:-moz-linear-gradient(left,#5cb85c,#9d9d9d);/*Mozilla*/
background:-webkit-gradient(linear,0 50%,100% 50%,from(#5cb85c),to(#9d9d9d));/*Old gradient for webkit*/
background:-webkit-linear-gradient(left,#5cb85c,#9d9d9d);/*new gradient for Webkit*/
background:-o-linear-gradient(left,#5cb85c,#9d9d9d); /*Opera11*/

效果：

從以上看出：須要漸變的方向，起點顏色和終點的顏色

 例子1）

從top到bottom（從上到下）

background: -moz-linear-gradient(top,#5cb85c,#9d9d9d);/*Firefox 3.6+*/
background: -webkit-linear-gradient(top, #5cb85c, #9d9d9d);/*Safari 5.1+,Chorme 10+*/
background: -o-linear-gradient(top,#5cb85c,#9d9d9d);/*Opera 11.10+*/

例子2）

從left-right

background: -moz-linear-gradient(left,#5cb85c,#9d9d9d);/*Firefox 3.6+*/
background: -webkit-linear-gradient(left, #5cb85c, #9d9d9d);/*Safari 5.1+,Chorme 10+*/
background: -o-linear-gradient(left,#5cb85c,#9d9d9d);/*Opera 11.10+*/

效果圖：

 

例子3）

 從left-top（水平 --- 垂直）

background: -moz-linear-gradient(left top,#5cb85c,lightpink);/*Firefox 3.6+*/
background: -webkit-linear-gradient(left top, #5cb85c, lightpink);/*Safari 5.1+,Chorme 10+*/
background: -o-linear-gradient(left top,#5cb85c,lightpink);/*Opera 11.10+*/

效果：

例子4）

background: -moz-linear-gradient(left,#5cb85c,#2b542c,#3c763d,#3fc4b0);/*Firefox 3.6+*/
background: -webkit-linear-gradient(left,#5cb85c,#2b542c,#3c763d,#3fc4b0);/*Safari 5.1+,Chorme 10+*/
background: -o-linear-gradient(left ,#5cb85c,#2b542c,#3c763d,#3fc4b0);/*Opera 11.10+*/

效果：

例子5）按百分比限定顏色佔的寬度

background: -moz-linear-gradient(left,#5cb85c,yellowgreen 20%,#3c763d 60%,yellow);/*Firefox 3.6+*/
background: -webkit-linear-gradient(left,#5cb85c,yellowgreen 20%,#3c763d 60%,yellow);/*Safari 5.1+,Chorme 10+*/
background: -o-linear-gradient(left ,#5cb85c,yellowgreen 20%,#3c763d 60%,yellow);/*Opera 11.10+*/

效果;