CSS3 經典教程系列:CSS3 線性漸變(linear-gradient)
CSS3 Gradient 分為 linear-gradient(線性漸變)和 radial-gradient(徑向漸變)。而我們今天主要是針對線性漸變來剖析其具體的用法。為了更好的應用 CSS3 Gradient,我們需要先了解一下目前的幾種現代瀏覽器的核心,主要有 Mozilla(Firefox,Flock等)、WebKit(Safari、Chrome等)、Opera(Opera瀏覽器)、Trident(討厭的IE瀏覽器)。
一、線性漸變在 Mozilla 下的應用
語法:
1 |
-moz-linear-gradient(
[<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) |
引數:其共有三個引數,第一個引數表示線性漸變的方向,top 是從上到下、left 是從左到右,如果定義成 left top,那就是從左上角到右下角。第二個和第三個引數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的引數,表示多種顏色的漸變。如圖所示:
根據上面的介紹,我們先來看一個簡單的例子:
HTML:
1 |
<div
class= "example
example1" ></div>
|
CSS:
1 2 3 4 |
.example
{
width : 150px ;
height : 80px ;
}
|
如無特殊說明,我們後面的示例都是應用這一段 html 和 css 的基本程式碼。
現在我們給這個div應用一個簡單的漸變樣式:
1 2 3 |
.example 1 {
background :
-moz-linear-gradient( top , #ccc , #000 );
}
|
效果如下:
二、線性漸變在 Webkit 下的應用
語法:
1 2 |
-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為結束點;第二個表示該點的顏色。如圖所示:
我們先來看一個老式的寫法示例:
1 |
background :
-webkit-gradient(linear, center top , center bottom ,from( #ccc ),
to(
|