css3漸變

簡介

css3漸變是指一個元素的背景顏色在兩個或多個顏色中平穩過渡。

我們常用的一個是線性漸變和徑向漸變。

線性漸變：是指顏色沿著一個方向過渡，可以是上、下、左、右、斜各個方向，但是也只能朝一個方向過渡。

background: linear-gradient(red, green);
複製程式碼

徑向漸變：是指顏色從一箇中心點向著四周發散。

background: radial-gradient(red, green);
複製程式碼

線性漸變

建立漸變必須至少設定兩個顏色，如果你只設定一個顏色，該屬性也就只能默默的無效了。 你還需要設定一個方向，如果你不設定方向，就會使用預設方向從上到下漸變。

語法

background: linear-gradient(direction, color1, color2, ...)
複製程式碼

方向的預定義關鍵字有：

top               從下到上
right             從左到右
bottom            從上到下
left              從右到左
left top          從右下到左上
right top         從左下到右上
left bottom       從右上到左下
right bottom      從左上到右下
複製程式碼

示例

bakcground: -webkit-linear-gradient(bottom, red, green); /* Safari 5.1 - 6.0, chrome 10.0 - 26.0 */
bakcground: -moz-linear-gradient(top, red, green); /* Firefox 3.6 - 15 */
bakcground: -o-linear-gradient(top, red, green); /* Opera 11.1 - 12.0 */
bakcground: linear-gradient(to top, red, green); /* 標準語法 */
複製程式碼

從上面的例子我們可以看出，各瀏覽器的舊版本跟標準語法有些差異，特別是webkit核心的瀏覽器，這點要注意下。

也許你感覺方向太少不夠用，沒關係，我們還可以用角度確定方向。

語法

background: linear-gradient(angle, color1, color2, ...)
複製程式碼

示意圖

從示意圖中我們可以看出，0deg表示的是從下往上，跟預定義欄位中的top一樣，90deg表示從左往右，與遇到定義欄位right一樣，以此類推，可以更改角度而表示360度各個方向。

示例

background: -webkit-linear-gradient(-90deg, red, green); /* Safari 5.1 - 6.0, chrome 10.0 - 26.0 */
background: -moz-linear-gradient(-90deg, red, green); /* Firefox 3.6 - 15 */
background: -o-linear-gradient(-90deg, red, green); /* Opera 11.1 - 12.0 */
background: linear-gradient(180deg, red, green); /* 標準語法 */
複製程式碼

從上面示例我們可以看出，在一些舊版瀏覽器中，表現的有些不一致，這是因為一些舊版瀏覽器中採用的方向標準跟標準不一樣，如下圖：

換算公式：y=90-x (x為標準角度，y為非標準角度)

前面說了，漸變可以有多個顏色節點

語法

background: linear-gradient(color1, color2, color3, ...) /* 平均分佈 */
background: lienar-gradient(color1, color2 pos, corlor3 pos, ...) /* 帶有位置 */
複製程式碼

示例

background: linear-gradient(red, green 50%, black);
複製程式碼

上例中，第一個顏色red和最後一個顏色沒有顯性的標出位置，則表示它們分別位於0%和100%處，也就是開始和結束。如果第一個顏色就標出位置，例如red 20%則表示red是從20%位置處開始漸變的，而20%以前的顏色為red，沒有漸變。同理，結束處的也一樣，如果標出位置則表示漸變到此處結束，這後面位置是沒有漸變的。示例如下：

background: linear-gradient(red 20%, green 50%, black 80%);
複製程式碼

有時，可能寫成這個樣子

background: linear-gradient(red, green 50%, yellow 50%, black)
background: linear-gradient(red, green 50%, yellow 40%, black)
複製程式碼

由圖可見，在50%的位置處漸變出現了明顯的斷層，即使yellow處的位置小於前面green處的位置，效果也一樣。green和yellow之間沒有了漸變。

透明度漸變

當我們採用rgba模式寫顏色時，透明度也可以漸變了。

background: linear-gradient(rgba(255, 0, 0, 0), rgba(255, 0, 0, 1))
複製程式碼

透明紅色漸變為不透明紅色。

重複的線性漸變

如果需要在一個元素上重複某種漸變，我們就可以使用repeating-linear-gradient()來重複這種漸變。

語法

repeating-linear-gradient(color1, color2 20%, ...)
複製程式碼

最後一個顏色必須有位置引數並且位置大於前面一個顏色的位置且不能為100%，不然就跟普通漸變沒區別。

background: repeating-linear-gradient(red, green 20%);
複製程式碼

從圖上我們發現漸變出現了斷層，我們可以修復一下

background: repeating-linear-gradient(red, green, red  20%);
複製程式碼

讓結束的顏色跟開頭的相同，就看不到斷層了。

徑向漸變

徑向漸變是從一個點向四周漸變。

語法

background: radial-gradient(center, shape, size, start-color, ..., last-color)
複製程式碼

• center：漸變起點的位置，可以為百分比，預設是圖形的正中心。
• shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。預設為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。
• size：漸變的大小，即漸變到哪裡停止，它有四個值：
  1. closest-side：最近邊
  2. farthest-side：最遠邊
  3. closest-corner：最近角
  4. farthest-corner：最遠角

多顏色均勻漸變

background: radial-gradient(red, green, yellow);
複製程式碼

以中心（50% 50%）為起點，到最遠角（farthest-corner），從red,green,yellow均勻漸變。

完整寫法：

bakcground: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, yellow);/* (漸變起點位置選項，不加字首不支援) */
複製程式碼

多顏色的不均勻分佈

background: radial-gradient(red, green 20%, yellow);
複製程式碼

設定漸變形狀

漸變的預設形狀是橢圓，我們可以手動設定簡便的形狀。

background: radial-gradient(circle, red, green, yellow);
複製程式碼

circle：漸變為最大的圓形； ellipse：根據元素形狀漸變，元素為正方形是顯示效果與circle無異。

不同尺寸的漸變

漸變的終點可以手動設定，有以下四種，預設是farthest-corner最遠角

background: radial-gradient(closest-side, red, green, yellow);
background: radial-gradient(farthest-side, red, green, yellow);
background: radial-gradient(closest-corner, red, green, yellow);
background: radial-gradient(farthest-corner, red, green, yellow);
複製程式碼

最近邊

最遠邊

最近角

最遠角

漸變起點位置

漸變的起點位置是可以改變的，用兩個百分數表示，預設50% 50%，第一個百分數代表水平位置，第二個百分數代表垂直位置。

background: radial-gradient(20% 20%, red, green, yellow);
複製程式碼

在實際使用中需要加瀏覽器字首。

重複性漸變

repeating-radial-gradient() 函式用於重複徑向漸變

background: repeating-radial-gradient(red, green, yellow 20%);
複製程式碼

重複的徑向漸變跟重複的線性漸變是一個道理，不多說了。