CSS漸變知識的詳細講解

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

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

一、瀏覽器支持

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

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

屬性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 線性漸變（向下／向上／向左／向右／傾斜）

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

語法：

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

HTML代碼：

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

例如：

線性漸變 － 上到下

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

＜style＞ ＃grad1 ｛ height： 200px； background： blue； 對于那些不支持漸變的瀏覽器 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）； 標準語法 （必須是最后一個） ｝＜／style＞

線性漸變 － 左到右

例如：

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

＜style＞ ＃grad1 ｛ height： 200px； background： blue； 對于那些不支持漸變的瀏覽器 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）； 標準語法 （必須是最后一個） ｝＜／style＞

線性漸變 － 對角線

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

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

＜style＞ ＃grad1 ｛ height： 200px； background： blue； 對于那些不支持漸變的瀏覽器 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）； 標準語法（必須是最后一個） ｝＜／style＞

1． 使用角度

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

語法

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

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

例如：

＃grad ｛ width： 100％； height： 100px； background： blue； 對于那些不支持漸變的瀏覽器 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）； 標準語法 ｝

2． 使用多個停止顏色

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

例如：

＃grad ｛ background： blue； 對于那些不支持漸變的瀏覽器 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）； 標準語法 ｝

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

漸變背景

例如：

＃grad ｛ background： blue； 對于那些不支持漸變的瀏覽器 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ù)的最后一個參數(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 徑向漸變 （由中心定義）

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

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

語法

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

徑向漸變－均勻的間隔停止顏色 （默認）

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

＃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 ｝

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

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

＃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ù)定義形狀。它可以取值圓或橢圓。默認值為橢圓形。

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

＜！DOCTYPE html＞＜html lang＝＂en＂＞ ＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞項目＜／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）； 標準語法（必須是最后一個） ｝
＃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）； 標準語法（必須是最后一個） ｝＜／style＞ ＜／head＞ ＜body＞
＜h3＞徑向漸變－形狀＜／h3＞
＜p＞＜strong＞橢圓（這是默認值）：＜／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ǔ)， 通過對css中漸變效果做了詳細的講解，介紹來了常見的兩種漸變方式。通過豐富的案例讓大家能夠更好的去了解，去體會漸變的用法，希望可以幫助大家更好的學習。