CSS漸變色效果的實現方法與效果演示

CSS漸變色(Gradients)也是一個相似的技術。如今火狐，谷歌瀏覽器，Safari，IE8+都支持這種技術，咱們能夠安全的在網站上使用它。下面咱們來看看CSS漸變色(Gradients)技術基本的語法，瀏覽器支持狀況和缺陷。

觀看演示

CSS漸變色(Gradients)術語和解釋

CSS漸變色(Gradients)能讓咱們用一種顏色漸變的效果修飾一個空間——從一種顏色過渡到另一種顏色——填充這個空間。漸變色有兩個形式：linear(線性漸變) 和 radial (環形漸變)。很顯然CSS漸變色(Gradients)技術是產生了一種視覺圖案效果，而實現這種視覺效果很簡單，能經過簡單編程實現。CSS3裏很早就引入了CSS漸變色(Gradients)，但這種技術的推廣卻經歷了很長時間。

CSS顏色線性漸變的語法

CSS顏色線性漸變的語法在各類瀏覽器裏的實現稍微有些不一樣，但最後是統一標準的：

background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)

第一個參數是漸變起始點或角。第二個參數是一種顏色中止點(color stops)。至少須要兩種顏色(起點和終點)，你能夠添加任意種顏色來增長顏色漸變的豐富程度。對顏色中止點的定義能夠是一種顏色，或一種顏色加一個百分比：

/*  color-stop(percentage/amount, color) */color-stop(0.20, red)

由於CSS漸變色(Gradients)技術是CSS3裏比較新的技術，屬於高級的CSS功能，因而每種瀏覽器對這種技術的實現都添加了一些本身的特點。例如以WebKIt爲渲染引擎的谷歌瀏覽器，就對它實現了多種語法。下面的這段代碼基本包括了全部自頂向下顏色漸變的全部狀況：

#example1	{
	/* 底色 */
	background-color: #063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);
	/* ie 6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	/* ie8 + */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
	/* ie10 */
	background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
	/* opera 11.1 */
	background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
	/* 標準寫法 */
	background-image: linear-gradient(#063053, #395873, #5c7c99);}

注意，咱們首先設定了一個背景色。這個顏色是在萬一用戶使用的瀏覽器不支持CSS漸變色(Gradients)技術時使用的顏色。CSS漸變色(Gradients)技術裏還支持帶有角度的漸變方向，而不只僅只有直上直下或直左直右。咱們能夠用下面的語法實現它：

#example2	{
	/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* ie10 */
	background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
	/* opera 11.1 */
	background-image: -o-linear-gradient(45deg, #063053, #395873);
	/* The "standard" */
	background-image: linear-gradient(45deg, #063053, #395873);}

咱們能夠作的更復雜些….一個色彩繽紛的CSS顏色漸變？下面咱們來作一個彩虹：

/* example 3 - linear rainbow */#example3	{
	/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(red, green, blue, purple, orange);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);
	/* ie10 */
	background-image: -ms-linear-gradient(red, green, blue, purple, orange);
	/* opera 11.1 */
	background-image: -o-linear-gradient(red, green, blue, purple, orange);
	/* The "standard" */
	background-image: linear-gradient(red, green, blue, purple, orange);}

關於IE對CSS顏色漸變技術的支持作一些說明：在早期IE是使用filter和-ms-filter語法實現漸變色，而最新版的IE裏改成了-ms-linear-gradient語法。咱們可使用CSS裏條件判斷語句來解決這個問題：

<!--[if lt IE 10]>
<style>
.gradientElement {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
}
</style>
<![endif]-->

不是很理想，但這對設計一個網站很重要。

CSS環形顏色漸變(Radial Gradients)

CSS環形顏色漸變(Radial Gradients)跟線性漸變(linear gradients)不同，它不是沿着一個方向漸變，而是以一個點爲中心，向四周輻射漸變，360度的。目前除了IE外的全部瀏覽器都支持CSS環形顏色漸變(Radial Gradients)，但它們也都有各自不一樣的語法…..我說的就是你，WebKit引擎的瀏覽器，WebKit曾經完全修改了它的CSS環形顏色漸變(Radial Gradients)的語法。下面咱們來看看老式的寫法：

/* basic */background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red));/* color stops */background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));

而如今WebKit(主要表明是谷歌瀏覽器)裏的新語法跟火狐瀏覽器的徹底一致了：

radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]*)

這種環形顏色漸變語法是最新的火狐和谷歌瀏覽器使用語法。還有一些常量可使用在這種漸變技術中來設定漸變環形的大小：

• closest-side: 對於原型，是指漸變圖形擴散時須要到達的最近的一個邊。對於橢圓，是指橫向或縱向中要達到最近的一個邊。

• closest-corner: 是指漸變圖形擴散時須要到達的最近的一個角

• farthest-side: 跟 closest-side 類似，但到達到的是最遠的一個邊。

• farthest-corner: 是指漸變圖形擴散時須要到達的最遠的一個角

• contain: closest-side的同義詞.

• cover: farthest-corner的同義詞

環形顏色漸變(Radial Gradients)的一個基本的用法是這樣的：

#example4 {
	background-image: -moz-radial-gradient(orange, red);
	background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* old */
	background-image: -webkit-radial-gradient(orange, red); /* new syntax */
	background-image: radial-gradient(orange, red);}

上面的例子沒有設定位置和大小——只有兩個顏色中止點。實際是可使用無數顏色，就像下面咱們製做的彩虹：

#example5 {
	background-image: -moz-radial-gradient(red,green,blue,purple,orange);
	background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* old */
	background-image: -webkit-radial-gradient(red, green, blue, purple, orange); /* new syntax */
	background-image: radial-gradient(red, green, blue, purple, orange);}

咱們實現一個更復雜的，加上位置信息和更多的顏色中止點：

#example6 {
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);}

注意上面使用的顏色寫法和長度的單位。是事實上你可使用任何顏色寫法或長度單位。

CSS顏色漸變(Gradients)的技巧和提示

CSS顏色漸變(Gradients)技術頗有價值，但有時很難實現。有時你已經實現了想要的漸變，而瀏覽器的支持也會成爲一個問題。下面是一些使用CSS顏色漸變(Gradients)的建議：

• 想讓你的CSS顏色漸變(Gradients)表現必定的透明度？使用 rgba 顏色。

• 使用背景色墊底，這樣防止當瀏覽器不支持時不注意沒有任何顏色。

• 火狐瀏覽器和谷歌瀏覽器都支持repeating-linear-gradient 和repeating-radial-gradient，用法是：

  #example7 {
  	background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);
  	background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);}

• 若是你對漸變效果要求很嚴格，例如圖表，動畫，我推薦你使用Dojo的GFX程序包，它是建立矢量圖的利器。並且對IE的支持也很是好！

CSS顏色漸變底色

老式瀏覽器，例如IE6，IE8或早期的火狐，並不支持漸變色技術，因此，你最好設置一個缺省的底色，當遇到不支持的瀏覽器時，background顏色就起到做用了：

/* example 1 - basic */#example1	{
	/* fallback */
	background-color:#063053;
	/* gradients below */}

對於不支持的瀏覽器的另一種方法是先用新式瀏覽器實現這個效果，而後截圖，而後使用CSS條件判斷來調整輸出方式。

觀看演示

CSS顏色漸變技術是CSS的一種發展進化的結果，隨着現代瀏覽器技術的愈來愈成熟，咱們能更自信的使用這種技術了。