CSS gradient漸變之webkit核心瀏覽器下的使用
一、關(guān)于漸變
漸變是一種應(yīng)用于平面的視覺效果,可以從一種顏色逐漸地轉(zhuǎn)變成另外一種顏色,故可以創(chuàng)建類似于彩虹的效果漸變可以應(yīng)用在任何可以使用圖片的地方。例如,您可以指定一個這么一個漸變:頂部的顏色是紅色,中間的是藍(lán)色,底部為黃色來作為div的背景色。漸變通過-webkit-gradient方法實現(xiàn),可以用來代替圖片URL。在webkit核心瀏覽器下(Safari4+, Chrome),有兩種類型的漸變,線性的和徑向的。您還可以指定多個中間過渡色,此稱之為color stops.
二、基本語法
webkit核心瀏覽器下的的基本語法如下:
-webkit-gradient(type, start_point, end_point, / stop...)
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)
參數(shù)
| 參數(shù)類型 | 簡要說明 |
|---|---|
| type | 漸變的類型,可以是線性漸變(linear)或是徑向漸變(radial) |
| start_point | 漸變圖像中漸變的起始點 |
| end_point | 漸變圖像中漸變的結(jié)束點 |
| stop | color-stop()方法,指定漸變進(jìn)程中特定的顏色 |
| inner_center | 內(nèi)部中心點,徑向漸變起始圓環(huán) |
| inner_radius | 內(nèi)部半徑,徑向漸變起始圓 |
| outer_center | 外部漸變結(jié)束圓的中心點 |
| outer_radius | 外部漸變結(jié)束圓的半徑 |
關(guān)于參數(shù)的具體說明
1. start_point和end_point
如果您對photoshop或是flash之類的設(shè)計軟件的漸變功能熟悉,那么理解漸變
的一些概念或是參數(shù)相對就容易些。例如,我們再photoshop中劃一條漸變線,會有起始點和結(jié)束點,這個起始點和結(jié)束點就對應(yīng)這里的
start_point和end_point參數(shù),如下圖:

start_point(x1,x2),end_point(x2,y2),這里的x,y對應(yīng)左上角為起點的坐標(biāo),此處的x,y參數(shù)表示與CSS中
的background-position是一致的,可以使像素值,或是百分比值或是left,top,right,bottom。
當(dāng)x1等于x2,y1不等于y2,實現(xiàn)垂直漸變,調(diào)整y1,y2的值可以調(diào)整漸變半徑大小;
當(dāng)y1等于y2,x1不等于x2,實現(xiàn)水平漸變,調(diào)整x1,x2的值可以調(diào)整漸變半徑大小;
當(dāng)y1不等于y2,x1不等于x2,實現(xiàn)角度漸變,當(dāng)x1,x2,y1,y2取值為極值的時候接近垂直漸變或水平漸變;
當(dāng)x1等于x2,y1等于y2,實現(xiàn)沒有漸變,取from色,即“ from(顏色值) ”;
2. stop
color-stop()我的理解就是過渡點,這些過渡點有兩個參數(shù),一個是點的位置,另外一個是過渡點的顏色。這些參數(shù)的示意也可以在photoshop之類的軟件漸變編輯器中找到對應(yīng)的位置。

我們會見到類似下面的代碼片段,color-stop(0.5, #ff0000)所表示的意思是在漸變過渡進(jìn)程的中心位置(50%的位置)有個顏色為#ff0000(紅色)的過渡色。
三、創(chuàng)建線性漸變
這里展示的是最簡單的線性漸變,由藍(lán)色至白色的漸變。代碼如下:
.linear{width:130px; height:130px; border:1px solid green; padding:10px; background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff)); -webkit-background-origin:padding; -webkit-background-clip:content;}
<div class="linear"></div>
參見上面的background屬性值,可以得到webkit核心瀏覽器下線性漸變的基本語法,如下:
-webkit-gradient(type,x1 y1, x2 y2, from(開始顏色值), [color-stop(位置偏移-小數(shù),停靠顏色值),...],to(結(jié)束顏色值));
上面示例代碼實現(xiàn)的效果如下截圖:

四、創(chuàng)建徑向漸變
徑向漸變也可以稱為放射狀漸變,常用來形成環(huán)狀效果,暈狀效果等。如下示例代碼:
.radial{
display:block;
width:150px;
height:150px;
border:1px solid blue;
background-image:-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
}
<div class="radial"></div>
結(jié)果如下圖,截自Safari瀏覽器:

五、指定過渡顏色點
即使用color-stop方法創(chuàng)建色標(biāo)點。含有兩個參數(shù),第一個參數(shù)表示漸變點的在整個漸變范圍內(nèi)的位置,以小數(shù)表示;第二個參數(shù)為顏色,可以使用RGBA的形式表示,這樣可以指定顏色的透明度。
使用color-stop指定過渡點或稱為色標(biāo)點時,漸變的開始(from())以及結(jié)束(to())顏色都是可以省略的。您可以參見下面的實例,第一個有from()以及end()的漸變,第二個沒有from()以及stop()。
1. 使用from()以及to()方法
body {
background: -webkit-gradient(linear, left top, left bottom, from(#ff0), color-stop(0.5, orange), to(rgb(255, 0, 0)));
}
上面代碼結(jié)果如下:

2. 不指定起始顏色與結(jié)束顏色
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.40, #ff0), color-stop(0.5, orange), color-stop(0.60, rgb(255, 0, 0)));
結(jié)果如下,截自Safari 4瀏覽器:

3. 多個過渡點在同一位置
width:200px; height:120px; background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
結(jié)果類似下面截圖:

六、創(chuàng)建背景重復(fù)漸變
CSS3中有個background-size屬性,可以改變背景圖片的大小,配合背景漸變屬性可以實現(xiàn)重復(fù)的背景漸變,如下代碼:
width:400px; height:150px; background:-webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffff00)); -webkit-background-size:0 20px;
結(jié)果如下圖:

參考文章
1. Safari CSS Visual Effects Guide
2. webkit 內(nèi)核瀏覽器的Linear Gradients (線性漸變)
3. CSS Property Functions
浙公網(wǎng)安備 33010602011771號