CSS gradient漸層之webkit核心瀏覽器下的使用

文章目錄

• 一、關於漸層
• 二、基本文法
• 三、建立線性漸層
• 四、建立放射狀漸層
• 五、指定過渡顏色點
• 六、建立背景重複漸層

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=734

一、關於漸層

漸層是一種應用於平面的視覺效果，可以從一種顏色逐漸地轉變成另外一種顏色，故可以建立類似於彩虹的效果漸層可以應用在任何可以使用圖片的地方。例如，您可以指定一個這麼一個漸層：頂部的顏色是紅色，中間的是藍色，底部為黃色來作為div的背景色。漸層通過-webkit-gradient方法實現，可以用來代替圖片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...)

參數

參數類型	簡要說明
type	漸層的類型，可以是線性漸層(linear)或是放射狀漸層(radial)
start_point	漸層映像中漸層的起始點
end_point	漸層映像中漸層的結束點
stop	color-stop()方法，指定漸層進程中特定的顏色
inner_center	內部中心點，放射狀漸層起始圓環
inner_radius	內部半徑，放射狀漸層起始圓
outer_center	外部漸層結束圓的中心點
outer_radius	外部漸層結束圓的半徑

關於參數的具體說明

1. start_point和end_point
如果您對photoshop或是flash之類的設計軟體的漸層功能熟悉，那麼理解漸層 的一些概念或是參數相對就容易些。例如，我們再photoshop中劃一條漸層線，會有起始點和結束點，這個起始點和結束點就對應這裡的 start_point和end_point參數，如：

start_point(x1,x2)，end_point(x2,y2)，這裡的x,y對應左上方為起點的座標，此處的x,y參數表示與CSS中 的background-position是一致的，可以使像素值，或是百分比值或是left,top,right,bottom。
當x1等於x2，y1不等於y2，實現垂直漸層，調整y1，y2的值可以調整漸層半徑大小；
當y1等於y2，x1不等於x2，實現水平漸層，調整x1，x2的值可以調整漸層半徑大小；
當y1不等於y2，x1不等於x2，實現角度漸層，當x1,x2,y1,y2取值為極值的時候接近垂直漸層或水平漸層；
當x1等於x2，y1等於y2，實現沒有漸層，取from色，即“ from(顏色值) ”；

2. stop
color-stop()我的理解就是過渡點，這些過渡點有兩個參數，一個是點的位置，另外一個是過渡點的顏色。這些參數的示意也可以在photoshop之類的軟體漸層編輯器中找到對應的位置。

我們會見到類似下面的程式碼片段，color-stop(0.5, #ff0000)所表示的意思是在漸層過渡進程的中心位置(50%的位置)有個顏色為#ff0000（紅色）的過渡色。

三、建立線性漸層

這裡展示的是最簡單的線性漸層，由藍色至白色的漸層。代碼如下：

.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(位置位移-小數,停靠顏色值),...],to(結束顏色值));

上面範例程式碼實現的效果如下：

四、建立放射狀漸層

放射狀漸層也可以稱為放射狀漸層，常用來形成環狀效果，暈狀效果等。如下範例程式碼：

.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> 

結果如，截自Safari瀏覽器：

五、指定過渡顏色點

即使用color-stop方法建立色標點。含有兩個參數，第一個參數表示漸層點的在整個漸層範圍內的位置，以小數表示；第二個參數為顏色，可以使用RGBA的形式表示，這樣可以指定顏色的透明度。

使用color-stop指定過渡點或稱為色標點時，漸層的開始(from())以及結束(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(#ff0000)); } 

上面代碼結果如下：

2. 不指定起始顏色與結束顏色

background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.40, #ff0), color-stop(0.5, orange), color-stop(0.60, #ff0000));

結果如下，截自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));

結果類似下面：

六、建立背景重複漸層

CSS3中有個background-size屬性，可以改變背景圖片的大小，配合背景漸層屬性可以實現重複的背景漸層，如下代碼：

width:400px; height:150px; background:-webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffff00)); -webkit-background-size:0 20px;

結果如：

參考文章
1. Safari CSS Visual Effects Guide
2. webkit 核心瀏覽器的Linear Gradients (線性漸層)
3. CSS Property Functions

如果您發現文章中有表述不準確或是有相關問題需要交流可以通過評論或是去這裡進行提問交流。
原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=734

（本篇完）