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ù)

關(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