css3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。
css3 定義了兩種型別的漸變（gradients）：
表中的數字指定了完全支援該屬性的第乙個瀏覽器版本。
後邊跟 -webkit-、-moz- 或 -o- 的數字指定了需加上字首才能支援屬性的第乙個版本。
屬性linear-gradient
10.0
26.0
10.0 -webkit-
16.0
3.6 -moz-
6.15.1 -webkit-
12.1
11.1 -o-
radial-gradient
10.0
26.0
10.0 -webkit-
16.0
3.6 -moz-
6.15.1 -webkit-
12.1
11.6 -o-
repeating-linear-gradient
10.0
26.0
10.0 -webkit-
16.0
3.6 -moz-
6.15.1 -webkit-
12.1
11.1 -o-
repeating-radial-gradient
10.0
26.0
10.0 -webkit-
16.0
3.6 -moz-
6.15.1 -webkit-
12.1
11.6 -o-
為了建立乙個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以設定乙個起點和乙個方向（或乙個角度）。
線性漸變的例項：
線性漸變 - 從上到下（預設情況下）
下面的例項演示了從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：
從上到下的線性漸變：
#grad
嘗試一下 »
線性漸變 - 從左到右
下面的例項演示了從左邊開始的線性漸變。起點是紅色，慢慢過渡到藍色：
從左到右的線性漸變：
#grad
嘗試一下 »
線性漸變 - 對角
你可以通過指定水平和垂直的起始位置來製作乙個對角漸變。
下面的例項演示了從左上角開始（到右下角）的線性漸變。起點是紅色，慢慢過渡到藍色：
從左上角到右下角的線性漸變：
#grad
嘗試一下 »
如果你想要在漸變的方向上做更多的控制，你可以定義乙個角度，而不用預定義方向（to bottom、to top、to right、to left、to bottom right，等等）。
background: linear-gradient(
angle,
color-stop1,
color-stop2);
角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將建立乙個從下到上的漸變，90deg 將建立乙個從左到右的漸變。
但是，請注意很多瀏覽器(chrome,safari,fiefox等)的使用了舊的標準，即 0deg 將建立乙個從左到右的漸變，90deg 將建立乙個從下到上的漸變。換算公式 90 - x = y 其中 x 為標準角度，y為非標準角度。
帶有指定的角度的線性漸變：
#grad
嘗試一下 »
下面的例項演示了如何設定多個顏色結點：
帶有多個顏色結點的從上到下的線性漸變：
#grad
嘗試一下 »
下面的例項演示了如何建立乙個帶有彩虹顏色和文字的線性漸變：
#grad
嘗試一下 »
css3 漸變也支援透明度（transparency），可用於建立減弱變淡的效果。
為了新增透明度，我們使用 rgba() 函式來定義顏色結點。rgba() 函式中的最後乙個引數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。
下面的例項演示了從左邊開始的線性漸變。起點是完全透明，慢慢過渡到完全不透明的紅色：
從左到右的線性漸變，帶有透明度：
#grad
嘗試一下 »
repeating-linear-gradient() 函式用於重複線性漸變：
乙個重複的線性漸變：
#grad
嘗試一下 »
徑向漸變由它的中心定義。
為了建立乙個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以指定漸變的中心、形狀（原型或橢圓形）、大小。預設情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。
徑向漸變的例項：
徑向漸變 - 顏色結點均勻分布（預設情況下）
顏色結點均勻分布的徑向漸變：
#grad
嘗試一下 »
徑向漸變 - 顏色結點不均勻分布
顏色結點不均勻分布的徑向漸變：
#grad
嘗試一下 »
shape 引數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。預設值是 ellipse。
形狀為圓形的徑向漸變：
#grad
嘗試一下 »
size 引數定義了漸變的大小。它可以是以下四個值：
帶有不同尺寸大小關鍵字的徑向漸變：
#grad1
#grad2
嘗試一下 »
repeating-radial-gradient() 函式用於重複徑向漸變：
乙個重複的徑向漸變：
#grad
嘗試一下 »
注意：internet explorer 9 及之前的版本不支援漸變。
五花八門的Barcamp和五花八門的人
像barcamp這樣的活動很有意思，據說這個活動是從國外引入的，就是一群可能誰也不認識的人，在某個固定的時間 固定的地點聚在一起，自願寫下自己分享的話題，在討論之後，開始分組討論，上面演講，底下提問，其樂融融。在北京的時候，自己作為乙個看客參加，沒有太多感觸，而在上海作為乙個speaker參加，感觸...
五花八門的Barcamp和五花八門的人
像barcamp這樣的活動很有意思，據說這個活動是從國外引入的，就是一群可能誰也不認識的人，在某個固定的時間 固定的地點聚在一起，自願寫下自己分享的話題，在討論之後，開始分組討論，上面演講，底下提問，其樂融融。在北京的時候，自己作為乙個看客參加，沒有太多感觸，而在上海作為乙個speaker參加，感觸...
Css3漸變 Gradients 徑向漸變
css3徑向漸變 radial gradient repeating radial gradient 徑向漸變由它的中心定義。建立徑向漸變，至少定義兩種顏色節點，呈現平穩過度的顏色。同時，你也可以指定漸變中心 形狀 圓形或橢圓形 大小。預設情況下，漸變的中心是center 表示在中心 漸變的形狀是e...