CSS3 漸變使您能夠是你的背景顏色在兩個(gè)或多個(gè)顏色之間平滑過渡。

早些時(shí)候，你必須使用圖像實(shí)現(xiàn)這些效果。 然而， 通過使用CSS3漸變可以減少下載時(shí)間和帶寬的使用． 此外，縮放的元素在縮放時(shí)看起來更好，因?yàn)闈u變是由瀏覽器生成的。

一、瀏覽器支持

表中的數(shù)字指定完全支持該屬性的第一個(gè)瀏覽器版本。（來源于百度）

數(shù)字后面的 －webkit－ 或者 －moz－ 使用時(shí)需要指定前綴。

屬性ChromeFirefoxSafariOperaIElinear－gradient26．0 10．0 －webkit－10．016．0 3．6 －moz－6．1 5．1 －webkit－12．1 11．1 －o－radial－gradient26．0 10．0 －webkit－10．016．0 3．6 －moz－6．1 5．1 －webkit－12．1 11．6 －o－repeating－linear－gradient26．0 10．0 －webkit－10．016．0 3．6 －moz－6．1 5．1 －webkit－12．1 11．1 －o－repeating－radial－gradient26．0 10．0 －webkit－10．016．0 3．6 －moz－6．1 5．1 －webkit－12．1 11．6 －o－

二、CSS3 線性漸變（向下／向上／向左／向右／傾斜）

要?jiǎng)?chuàng)建線性漸變，必須定義至少兩個(gè)顏色停止。顏色停止是你想要渲染平滑過渡之間的顏色。 您還可以設(shè)置一個(gè)起始點(diǎn)和一個(gè)方向（或角度）和漸變效果。

語法：

background： linear－gradient（direction， color－stop1， color－stop2， ．．．）；

HTML代碼：

＜！DOCTYPE html＞＜html lang＝＂en＂＞＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞項(xiàng)目＜／title＞
＜／head＞＜body＞
＜div id＝＂grad1＂＞＜／div＞＜／body＞＜／html＞

例如：

線性漸變 － 上到下

顯示從頂部開始的線性漸變。它從開始的紅色，過渡到黃色：

＜style＞ ＃grad1 ｛ height： 200px； background： blue； 對(duì)于那些不支持漸變的瀏覽器 background： －webkit－linear－gradient（blue， yellow）； Safari 5．1 到 6．0 background： －o－linear－gradient（blue， yellow）； Opera 11．1 到 12．0 background： －moz－linear－gradient（blue， yellow）； Firefox 3．6 到 15 background： linear－gradient（blue， yellow）； 標(biāo)準(zhǔn)語法 （必須是最后一個(gè)） ｝＜／style＞

線性漸變 － 左到右

例如：

顯示從左開始的線性漸變。它從開始的紅色，過渡到黃色

＜style＞ ＃grad1 ｛ height： 200px； background： blue； 對(duì)于那些不支持漸變的瀏覽器 background： －webkit－linear－gradient（left， blue ， yellow）； Safari 5．1 到 6．0 background： －o－linear－gradient（right， blue， yellow）； Opera 11．1 到 12．0 background： －moz－linear－gradient（right， blue， yellow）； Firefox 3．6 到 15 background： linear－gradient（to right， blue ， yellow）； 標(biāo)準(zhǔn)語法 （必須是最后一個(gè)） ｝＜／style＞

線性漸變 － 對(duì)角線

可以通過指定水平和垂直起始位置來實(shí)現(xiàn)對(duì)角線漸變。

下面的示例顯示從左上角開始的線性漸變（到右下角）。它開始紅色，過渡到黃色：

＜style＞ ＃grad1 ｛ height： 200px； background： blue； 對(duì)于那些不支持漸變的瀏覽器 background： －webkit－linear－gradient（left top， blue， yellow）； Safari 5．1 到 6．0 background： －o－linear－gradient（bottom right， blue， yellow）； Opera 11．1 到 12．0 background： －moz－linear－gradient（bottom right， blue， yellow）； Firefox 3．6 到 15 background： linear－gradient（to bottom right， blue， yellow）； 標(biāo)準(zhǔn)語法（必須是最后一個(gè)） ｝＜／style＞

1． 使用角度

如果你想在漸變方向上有更多的控制，你可以定義一個(gè)角度，而不是預(yù)定的方向（下、上、左、右等）。

語法

background： linear－gradient（angle， color－stop1， color－stop2）；angle 是水平線和漸變線之間的角度。

下面的示例演示如何使用在線性漸變上使用角度：

例如：

＃grad ｛ width： 100％； height： 100px； background： blue； 對(duì)于那些不支持漸變的瀏覽器 background： －webkit－linear－gradient（－90deg， blue， yellow）； Safari 5．1 到 6．0 background： －o－linear－gradient（－90deg， blue， yellow）； Opera 11．1 到 12．0 background： －moz－linear－gradient（－90deg， blue， yellow）； Firefox 3．6 到 15 background： linear－gradient（－90deg， blue， yellow）； 標(biāo)準(zhǔn)語法 ｝

2． 使用多個(gè)停止顏色

下面的示例顯示一個(gè)具有多個(gè)停止顏色的線性漸變（從上到下）

例如：

＃grad ｛ background： blue； 對(duì)于那些不支持漸變的瀏覽器 background： －webkit－linear－gradient（blue， yellow， green）； Safari 5．1 到 6．0 background： －o－linear－gradient（blue， yellow， green）； Opera 11．1 到 12．0 background： －moz－linear－gradient（blue， yellow， green）； Firefox 3．6 到 15 background： linear－gradient（blue， yellow， green）； 標(biāo)準(zhǔn)語法 ｝

下面實(shí)例演示了如何使用彩虹顏色和一些文本來創(chuàng)建一個(gè)線性漸變（從左到右）

漸變背景

例如：

＃grad ｛ background： blue； 對(duì)于那些不支持漸變的瀏覽器 Safari 5．1 到 6．0 background： －webkit－linear－gradient（left，red，orange，yellow，green，blue，indigo，violet）； Opera 11．1 到 12．0 background： －o－linear－gradient（left，red，orange，yellow，green，blue，indigo，violet）； Fx 3．6 到 15 background： －moz－linear－gradient（left，red，orange，yellow，green，blue，indigo，violet）； Standard syntax background： linear－gradient（到 right， red，orange，yellow，green，blue，indigo，violet）；｝

3． 使用的透明度

CSS3 漸變也支持透明度，可以用來創(chuàng)建淡入淡出效果。

添加透明度，我們用rgba（）函數(shù)來定義停止顏色。在rgba（）函數(shù)的最后一個(gè)參數(shù)可以從0到1的值，并定義顏色的透明度：0表示完全透明，1表示完全的顏色（不透明度）。

下面的示例顯示從左開始的線性漸變。它開始完全透明，過渡到全紅色：

＃grad ｛ background： blue； 不支持漸變的瀏覽器 background： －webkit－linear－gradient（left，rgba（255，0，0，0），rgba（255，0，0，1））； Safari 5．1－6 background： －o－linear－gradient（right，rgba（255，0，0，0），rgba（255，0，0，1））； Opera 11．1－12 background： －moz－linear－gradient（right，rgba（255，0，0，0），rgba（255，0，0，1））； Fx 3．6－15 background： linear－gradient（to right， rgba（255，0，0，0）， rgba（255，0，0，1））； Standard｝

4． 重復(fù)線性漸變

repeating－linear－gradient（） 函數(shù)用于重復(fù)線性漸變：

例如：

＃grad ｛ background： blue； 不支持漸變的瀏覽器 Safari 5．1 到 6．0 background： －webkit－repeating－linear－gradient（blue， yellow 10％， green 20％）； Opera 11．1 到 12．0 background： －o－repeating－linear－gradient（blue， yellow 10％， green 20％）； Firefox 3．6 到 15 background： －moz－repeating－linear－gradient（blue， yellow 10％， green 20％）； Standard syntax background： repeating－linear－gradient（blue， yellow 10％， green 20％）；｝

三、CSS3 徑向漸變 （由中心定義）

徑向漸變是由其中心定義的。

要?jiǎng)?chuàng)建徑向漸變，還必須定義至少兩個(gè)停止顏色。

語法

background： radial－gradient（shape size at position， start－color， ．．．， last－color）；默認(rèn)情況下，形狀是橢圓形，大小最遠(yuǎn)的角落，位置是中心。

徑向漸變－均勻的間隔停止顏色 （默認(rèn)）

下面的示例顯示一個(gè)徑向漸變，其顏色間隔均勻：

＃grad ｛ background： blue； browsers that do not support gradients background： －webkit－radial－gradient（blue， yellow， green）； Safari 5．1 到 6．0 background： －o－radial－gradient（blue， yellow， green）； Opera 11．6 到 12．0 background： －moz－radial－gradient（blue， yellow， green）； Firefox 3．6 到 15 background： radial－gradient（blue， yellow， green）； Standard syntax ｝

徑向漸變－不同間隔的停止顏色

下面的例子顯示了一個(gè)具有不同間距的顏色漸變的徑向漸變：

＃grad ｛ background： blue； 不支持漸變的瀏覽器 background： －webkit－radial－gradient（blue 5％， yellow 15％， green 60％）； Safari 5．1－6．0 background： －o－radial－gradient（blue 5％， yellow 15％， green 60％）； Opera 11．6－12．0 background： －moz－radial－gradient（blue 5％， yellow 15％， green 60％）； Firefox 3．6－15 background： radial－gradient（blue 5％， yellow 15％， green 60％）； Standard syntax ｝

1． 設(shè)置形狀

形狀參數(shù)定義形狀。它可以取值圓或橢圓。默認(rèn)值為橢圓形。

下面的例子顯示了一個(gè)圓形的徑向漸變：

＜！DOCTYPE html＞＜html lang＝＂en＂＞ ＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞項(xiàng)目＜／title＞ ＜style＞ ＃grad1 ｛ height： 150px； width： 200px； background： －webkit－radial－gradient（blue， yellow， green）； Safari 5．1 到 6．0 background： －o－radial－gradient（blue， yellow， green）； Opera 11．6 到 12．0 background： －moz－radial－gradient（blue， yellow， green）； Fx 3．6 到 15 background： radial－gradient（blue， yellow， green）； 標(biāo)準(zhǔn)語法（必須是最后一個(gè)） ｝
＃grad2 ｛ height： 150px； width： 200px； background： －webkit－radial－gradient（circle， blue， yellow， green）； Safari 5．1 到 6．0 background： －o－radial－gradient（circle， blue， yellow， green）； Opera 11．6 到 12．0 background： －moz－radial－gradient（circle， blue， yellow， green）； Fx 3．6 到 15 background： radial－gradient（circle， blue， yellow， green）； 標(biāo)準(zhǔn)語法（必須是最后一個(gè)） ｝＜／style＞ ＜／head＞ ＜body＞
＜h3＞徑向漸變－形狀＜／h3＞
＜p＞＜strong＞橢圓（這是默認(rèn)值）：＜／strong＞＜／p＞ ＜div id＝＂grad1＂＞＜／div＞
＜p＞＜strong＞圓：＜／strong＞＜／p＞ ＜div id＝＂grad2＂＞＜／div＞
＜p＞＜strong＞注意：＜／strong＞ Internet Explorer 9 和早期的版本不支持漸變。＜／p＞
＜／body＞＜／html＞

2． 重復(fù)徑向漸變

repeating－radial－gradient（） 函數(shù)用于重復(fù)徑向漸變：

例如：

＃grad ｛ background： blue； 不支持漸變的瀏覽器 Safari 5．1 到 6．0 background： －webkit－repeating－radial－gradient（blue， yellow 10％， green 15％）； Opera 11．6 到 12．0 background： －o－repeating－radial－gradient（blue， yellow 10％， green 15％）； Firefox 3．6 到 15 background： －moz－repeating－radial－gradient（blue， yellow 10％， green 15％）； Standard syntax background： repeating－radial－gradient（blue， yellow 10％， green 15％）；｝

四、總結(jié)

本文基于html基礎(chǔ)， 通過對(duì)css中漸變效果做了詳細(xì)的講解，介紹來了常見的兩種漸變方式。通過豐富的案例讓大家能夠更好的去了解，去體會(huì)漸變的用法，希望可以幫助大家更好的學(xué)習(xí)。