CSS3 Gradient 分為 linear-gradient(線性漸變)和 radial-gradient(徑向漸變),。而我們今天主要是針對線性漸變來剖析其具體的用法,。為了更好的應用 CSS3 Gradient,我們需要先了解一下目前的幾種現(xiàn)代瀏覽器的內(nèi)核,,主要有 Mozilla(Firefox,,F(xiàn)lock等)、WebKit(Safari,、Chrome等),、Opera(Opera瀏覽器)、Trident(討厭的IE瀏覽器),。
本文照常忽略IE不管,,我們主要看看在 Mozilla、Webkit、Opera 下的應用,,當然在 IE 下也可以實現(xiàn),,他需要通過 IE 特有的濾鏡來實現(xiàn),在后面會列出濾鏡的使用語法,,但不會具體介紹如何實用,,感興趣的可以搜索相關(guān)技術(shù)文檔。
一,、線性漸變在 Mozilla 下的應用
語法:
1 |
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
|
參數(shù):其共有三個參數(shù),,第一個參數(shù)表示線性漸變的方向,top 是從上到下,、left 是從左到右,,如果定義成 left top,那就是從左上角到右下角,。第二個和第三個參數(shù)分別是起點顏色和終點顏色,。你還可以在它們之間插入更多的參數(shù),表示多種顏色的漸變,。如圖所示:
根據(jù)上面的介紹,,我們先來看一個簡單的例子:
HTML:
1 |
<div class= "example example1" ></div>
|
CSS:
1
2
3
4 |
.example {
width : 150px ;
height : 80px ;
}
|
如無特殊說明,我們后面的示例都是應用這一段 html 和 css 的基本代碼,。
現(xiàn)在我們給這個div應用一個簡單的漸變樣式:
1
2
3 |
.example 1 {
background : -moz-linear-gradient( top , #ccc , #000 );
}
|
效果如下:
二,、線性漸變在 Webkit 下的應用
語法:
1
2 |
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新發(fā)布書寫語法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式語法書寫規(guī)則
|
參數(shù):-webkit-gradient 是 webkit 引擎對漸變的實現(xiàn)參數(shù),一共有五個,。第一個參數(shù)表示漸變類型(type),,可以是linear(線性漸變)或者radial(徑向漸變)。第二個參數(shù)和第三個參數(shù),,都是一對值,,分別表示漸變起點和終點。這對值可以用坐標形式表示,,也可以用關(guān)鍵值表示,,比如 left top(左上角)和left bottom(左下角)。第四個和第五個參數(shù),,分別是兩個color-stop函數(shù),。color-stop 函數(shù)接受兩個參數(shù),第一個表示漸變的位置,,0為起點,,0.5為中點,1為結(jié)束點,;第二個表示該點的顏色,。如圖所示:
我們先來看一個老式的寫法示例:
1 |
background : -webkit-gradient(linear, center top , center bottom ,from( #ccc ), to( #000 ));
|
效果如下所示:
接著我們在來看一下新式的寫法:
1 |
-webkit-linear-gradient( top , #ccc , #000 );
|
這個效果我就不在貼出來了,,大家在瀏覽器中一看就明白了,他們是否一致的效果,。仔細對比,,在 Mozilla 和 Webkit 下兩者的學法都基本上一致了,只是其前綴的區(qū)別,,當然哪一天他們能統(tǒng)一成一樣,,對我們來說當然是更好了,那就不用去處理了,。將大大節(jié)省我們的開發(fā)時間喲,。
三、線性漸變在 Opera 下的應用
語法:
1 |
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]);
|
參數(shù):-o-linear-gradient 有三個參數(shù),。第一個參數(shù)表示線性漸變的方向,,top 是從上到下、left 是從左到右,,如果定義成 left top,,那就是從左上角到右下角。第二個和第三個參數(shù)分別是起點顏色和終點顏色,。你還可以在它們之間插入更多的參數(shù),,表示多種顏色的漸變。(注:Opera 支持的版本有限,,本例測試都是在 Opera11.1 版本下,,后面不在提示),如圖所示:
示例代碼:
1 |
background : -o-linear-gradient( top , #ccc , #000 );
|
效果如圖所示:
四,、線性漸變在 Trident (IE) 下的應用
語法:
1
2 3 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType= 0 , startColorstr= #1471da , endColorstr= #1C85FB );
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)" ;
|
IE依靠濾鏡實現(xiàn)漸變,。startColorstr表示起點的顏色,endColorstr 表示終點顏色,。GradientType 表示漸變類型,,0 為缺省值,,表示垂直漸變,,1 表示水平漸變。如圖所示:
上面我們主要介紹了線性漸變在上述四大核心模塊下的實現(xiàn)方法,,接著我們主要針對線性漸變在 Mozilla,、Webkit、Opera 三大模塊下實現(xiàn)各種不同線性漸變實例:
從上面的語法中我們可以很清楚的知道,,要創(chuàng)建一個線性漸變,,我們需要創(chuàng)建一個起點和一個漸變方向(或角度),定義一個起始色:
1
2
3 |
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-o-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
|
具體應用如下:
1
2
3
4 |
background :-moz-linear-gradient( left , #ace , #f96 );
background :-webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 ));
background :-webkit-linear-gradient( left , #ace , #f96 );
background :-o-linear-gradient( left , #ace , #f96 );
|
效果如下:
起始點(Starting Point)的工作方式類似于 background position,。您可以設(shè)置水平和垂直位置為百分比,,或以像素為單位,,或在水平方向上可以使用left/center/right,在垂直方向上可以使用top/center/bottom,。位置起始于左上角,。如果你不指定水平或垂直位置,它將默認為center,。其工作方式主要包含:Top → Bottom,、Left → Right、bottom → top,、right → left等,,接著我們主要一種一種來看其實現(xiàn)的效果:
1、開始于center(水平方向)和top(垂直方向)也就是Top → Bottom:
1
2
3
4
5
6
7
8
9 |
background : -moz-linear-gradient( top , #ace , #f96 );
background : -webkit-gradient(linear, top ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( top , #ace , #f96 );
background : -o-linear-gradient( top , #ace , #f96 );
|
效果:
2,、始于left(水平方向)和center(垂直方向)也是就Left → Right:
1
2
3
4
5
6 |
background : -moz-linear-gradient( left , #ace , #f96 );
background : -webkit-linear-gradient( left , #ace , #f96 );
background : -o-linear-gradient( left , #ace , #f96 );
|
效果如下:
3,、起始于left(水平方向)和top(垂直方向):
1
2
3 |
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):
1
2
3
4
5
6
7
8 |
background : -moz-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace );
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 ));
background : -webkit-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace );
background : -o-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace );
|
效果如下:
5,、with Specified Arbitrary Stops:
1
2
3
4
5
6
7
8 |
background : -moz-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace );
background : -webkit-gradient(linear, left top , right top , from( #ace ), color-stop( 0.05 , #f96 ), color-stop( 0.5 , #ace ), color-stop( 0.95 , #f96 ), to( #ace ));
background : -webkit-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace );
background : -o-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace );
|
效果如下:
6,、角度(Angle):
正如上面看到的示例,如果您不指定一個角度,,它會根據(jù)起始位置自動定義,。如果你想更多的控制漸變的方向,您不妨設(shè)置角度試試,。例如,,下面的兩個漸變具有相同的起點left center,但是加上一個30度的角度,。
沒有角度的示例代碼:
1
2
3 |
background : -moz-linear-gradient( left , #ace , #f96 );
background : -webkit-linear-gradient( left , #ace , #f96 );
background : -o-linear-gradient( left , #ace , #f96 );
|
加上30度的角度代碼:
1
2
3 |
background : -moz-linear-gradient( left 30 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0 0 , 100% 100% , from( #ace ),to( #f96 ));
background : -o-linear-gradient( 30 deg, #ace , #f96 );
|
效果圖如下:
當指定的角度,,請記住,它是一個由水平線與漸變線產(chǎn)生的的角度,,逆時針方向,。因此,使用0deg將產(chǎn)生一個左到右橫向梯度,,而90度將創(chuàng)建一個從底部到頂部的垂直漸變,。我來看看你核心代碼:
1
2
3
4 |
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 );
|
我們來看看各角度的區(qū)別:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55 |
.deg 0 {
background : -moz-linear-gradient( 0 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 0 deg, #ace , #f96 );
background : -o-linear-gradient( 0 deg, #ace , #f96 );
}
.deg 45 {
background : -moz-linear-gradient( 45 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0 100% , 100% 0% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 45 deg, #ace , #f96 );
background : -o-linear-gradient( 45 deg, #ace , #f96 );
}
.deg 90 {
background : -moz-linear-gradient( 90 deg, #ace , #f96 );
background : -webkit-gradient(linear, 50% 100% , 50% 0% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 90 deg, #ace , #f96 );
background : -o-linear-gradient( 90 deg, #ace , #f96 );
}
.deg 135 {
background : -moz-linear-gradient( 135 deg, #ace , #f96 );
background : -webkit-gradient(linear, 100% 100% , 0 0 ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 135 deg, #ace , #f96 );
background : -o-linear-gradient( 135 deg, #ace , #f96 );
}
.deg 180 {
background : -moz-linear-gradient( 180 deg, #ace , #f96 );
background : -webkit-gradient(linear, 100% 50% , 0 50% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 180 deg, #ace , #f96 );
background : -o-linear-gradient( 180 deg, #ace , #f96 );
}
.deg 225 {
background : -moz-linear-gradient( 225 deg, #ace , #f96 );
background : -webkit-gradient(linear, 100% 0% , 0 100% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 225 deg, #ace , #f96 );
background : -o-linear-gradient( 225 deg, #ace , #f96 );
}
.deg 270 {
background : -moz-linear-gradient( 270 deg, #ace , #f96 );
background : -webkit-gradient(linear, 50% 0% , 50% 100% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 270 deg, #ace , #f96 );
background : -o-linear-gradient( 270 deg, #ace , #f96 );
}
.deg 315 {
background : -moz-linear-gradient( 315 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0% 0% , 100% 100% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 315 deg, #ace , #f96 );
background : -o-linear-gradient( 315 deg, #ace , #f96 );
}
.deg 360 {
background : -moz-linear-gradient( 360 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 360 deg, #ace , #f96 );
background : -o-linear-gradient( 360 deg, #ace , #f96 );
}
|
效果如下:
除了起始位置和角度,你應該指定起止顏色,。起止顏色是沿著漸變線,,將會在指定位置(以百分比或長度設(shè)定)含有指定顏色的點。色彩的起止數(shù)是無限的,。如果您使用一個百分比位置,,0%代表起點和100%是終點,但區(qū)域外的值可以被用來達到預期的效果,。 這也是通過CSS3 Gradient制作漸變的一個關(guān)鍵所在,,其直接影響了你的設(shè)計效果,,像我們這里的示例都不是完美的效果,只是為了能給大家展示一個漸變的效果,,大家就這樣先用著吧,。我們接著看一下不同的起址色的示例:
1
2
3 |
background : -moz-linear-gradient( top , #ace , #f96 80% , #f96 );
background : -webkit-linear-gradient( top , #ace , #f96 80% , #f96 );
background : -o-linear-gradient( top , #ace , #f96 80% , #f96 );
|
效果如下:
如果沒有指定位置,顏色會均勻分布,。如下面的示例:
1
2
3 |
background : -moz-linear-gradient( left , red , #f96 , yellow, green , #ace );
background : -webkit-linear-gradient( left , red , #f96 ,yellow, green , #ace );
background : -o-linear-gradient( left , red , #f96 , yellow, green , #ace );
|
效果如下
7,、漸變上應用透明度(Transparency):
透明漸變對于制作一些特殊的效果是相當有用的,例如,,當堆疊多個背景時,。這里是兩個背景的結(jié)合:一張圖片,一個白色到透明的線性漸變,。我們來看一個官網(wǎng)的示例吧:
|