基於css的漸變與圖片漸變相比，最大的優點是便於修改，同時支援無段縮放，過渡更加自然。目前，實現css漸變的只有基於webkit和gecko引擎的瀏覽器，基於presto引擎的opera瀏覽器暫時不支援漸變，基於trident的ie雖然可以通過濾鏡的方式實現，但並不提倡。
webkit引擎（safari 4以上版本）的css漸層設計
基本語法：
-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)
參數說明：
<type>:定義漸變類型，包括線性漸變（linear）和徑向漸層（radial）。
<point>:定義漸變起始點和結束點座標，即開始應用漸變的x軸和y軸座標，以及結束漸變的座標。此參數支援數值，百分比和關鍵字，如（0，0）或（left，top）等。關鍵字包括top，bottom，left和right。
<radius>:當定義徑向漸變時，用來設定徑向漸變的長度，此參數為一個數值。
<stop>:定義漸層色和步長。包含三個類型值，即開始的顏色，使用from （color value）函數定義；結束的顏色，使用to（color value）函數定義：顏色步長，使用color-stop（value，color value）定義。 color-stop（）包含兩個參數值，第一個參數值為一個數值或百分比值，取值範圍為0~1.0（或0%~100%），第二個參數值表示任意顏色值。
直線漸層基本用法：
<strong><code class=" hljs lasso">/*简单的线性渐变背景色，从顶部到底部，从蓝色向红色渐变显示*/ </code></strong><code class=" hljs lasso">background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));</code>
示範效果： 
<strong><code class=" hljs lasso">/*从顶部到中间，再从中间到底部，从蓝色到绿色，再到红色渐变显示*/ </code></strong><code class=" hljs lasso">background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(50%, green));</code>
示範效果： 
<strong><code class=" hljs lasso">/*设计二重渐变，从顶部到底部，先是从蓝色到白色渐变显示，再从黑色到红色渐变显示*/ </code></strong><code class=" hljs lasso">background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.5, #fff), color-stop(0.5, #000));</code>
示範效果： 
<strong><code class=" hljs lasso">/*通过设置不同的步长值，从而设计多重渐变效果，从顶部到底部，先是从蓝色到白色渐变，再从百色到黑色渐变，最后是从黑色到红色渐变显示*/ </code></strong><code class=" hljs lasso">background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));</code>
示範效果： 
小結：color-stop（）函數包含兩個參數值，第一個參數值指定角標位置，第二個參數指定色標顏色。一個漸層可以包含多個色標，位置值為0~1之間的小數，或是0~100%之間的百分數，指定色標的位置比例。
徑向漸層的基本用法
<strong><code class=" hljs lasso">/*同心圆（圆心坐标为200，100），内圆半径为10，外圆半径为100，内圆小于外圆半径，从内圆红色到外圆绿色径向渐变，超过外圆半径显示为绿色，内圆显示红色*/</code></strong><code class=" hljs lasso"> background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green));</code>
效果顯示： 
<strong><code class=" hljs lasso">/*同心圆（圆心坐标为200，100），内圆半径为100，外圆半径为100，内圆小于外圆半径，从内圆红色到外圆绿色径向渐变。当内圆和外圆半径相等时，则渐变无效*/ </code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));</code>
示範效果： 
<strong><code class=" hljs lasso">/*同心圆（圆心坐标为200，100），内圆半径为100，外圆半径为10，内圆大于外圆半径，从内圆红色到外圆绿色径向渐变，超出内圆半径显示为红色，外圆显示绿色*</code></strong><code class=" hljs lasso">/ background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red), to(green));</code>
示範效果： 
<strong><code class=" hljs lasso">/*非同心圆，内圆圆心和外圆圆心的距离小于两圆半径的差，则显示上图效果，呈现锥形径向渐变效果。锥形的尖锐性与两圆圆心距离成正比*/ </code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 120 100, 10, 200 100, 100, from(red), to(green));</code>
示範效果： 
<strong><code class=" hljs lasso">/*同心圆，在内圆到外圆中间90%的位置，即距离外环内添加一个蓝色色标，设计多层径向渐变，如下图所示。*/ </code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));</code>
示範效果： 
<strong><code class=" hljs lasso">/*通过设置to()函数的颜色值为透明，可以设计发散的圆形效果*/ </code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));</code>
示範效果： 
<strong><code class=" hljs lasso">/*通过设置to（）函数的颜色值为透明，同时设计相似色，可以设计球形效果*/ </code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00c), to(rgba(1,159,98,0)), color-stop(98%, #0cf));</code>
示範效果： 
<strong><code class=" hljs lasso">/*通过为背景图定义多个径向渐变，可以设计多个气泡效果，如下图所示*/ </code></strong><code class=" hljs lasso">background: -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, 300 110, 10, 300 100, 100, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); -webkit-background-origin: padding-box; -webkit-background-clip: content-box;</code>
示範效果： 
漸層應用定義漸變效果的邊框
程式碼：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>webkit引擎的渐变实现方法</title>
<style type="text/css">
div {
border-width: 20px;
width: 400px;
height: 200px;
margin: 20px;
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 20;
}
</style>
</head>
<body>
<div></div>
</body>
</html>示範效果： 
定義填滿內容效果
程式碼：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>webkit引擎的渐变实现方法</title>
<style type="text/css">
.div1 {
width:400px;
height:200px;
border:10px solid #a7d30c;
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
float:left;
}
.div1::before {
width:400px;
height:200px;
border:10px solid #019f62;
content: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(#a7d30c), to(rgba(1, 159, 98, 0)), color-stop(90%, #019f62));
display: block;
}
</style>
</head>
<body>
<div class="div1">透视框</div>
</body>
</html>顯示效果： 
定義清單圖示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
ul {
list-style-image: -webkit-gradient(radial, center center, 4, center center, 8, from(#ff0000), to(rgba(0, 0, 0, 0)), color-stop(90%, #dd0000))
}
</style>
</head>
<body>
<ul>
<li>新闻列表项1</li>
<li>新闻列表项2</li>
<li>新闻列表项3</li>
<li>新闻列表项4</li>
</ul>
</body>
</html>示範效果： 
