第 22 章 CSS3 漸變效果

學習要點：

1.線性漸變

2.徑向漸變

主講教師：李炎恢

本章主要探討 HTML5 中 CSS3 背景漸變功能，主要有兩種漸變方式：線性漸變和徑向（放射性）漸變。

一．線性漸變

CSS3 提供了 linear-gradient 屬性實現背景顏色的漸變功能。在以前，這種效果必須採用圖片才能實現的。首先，我們先看一下它的樣式表，如下：

//兩個必須參數

background-image: linear-gradient(orange,green);

//增加一個方位

background-image: linear-gradient(to top,orange,green);

通過 top、left、right、bottom 這四組實現的漸變方向有時比較單一，我們可以使用以角度單位的數值來設置方位。比如 0 度（0deg）相當於 to top；角度會沿逆時針方向隨著你的角度的增加而增加。

//通過角度設置方位，0 ~ 360 度之間，可以是負值 

background-image: linear-gradient(45deg,orange,green); 

//多色線性漸變

background-image: linear-gradient(-45deg,orange,green,blue,red);

//通過百分比設置多色線性位置

background-image: linear-gradient(-45deg, orange 0%, green 20%, blue 40%, red 100%);

預設情況下：起始顏色的百分比位置是 0%，末尾顏色的百分比位置是 100%，其他位置按照平均值分配。也可以使用 px 像素來設定，但計算麻煩點。

//結合背景，並使用透明漸變實現強大層次感 

background-image: linear-gradient(to top right, rgba(0,0,0,0.6), rgba(0,0,0,0));

//重覆漸變屬性值

background-image: repeating-linear-gradient(to top, orange 10px, green 30px);

目前最新的主流瀏覽器都支持 CSS3 的漸變屬性，那麼對於之前的瀏覽器支持度如何呢？可以參考如下的表：

這裡提到了部分支持，說明當時可能漸變還尚未完善，但可以通過添加首碼來使用它了。具體哪些沒完善，已經無法考證了，版本太過久遠。那麼支持帶首碼和不支持帶首碼的完整格式如下：

//加上相容首碼

background-image: -webkit-linear-gradient(to top, orange, green); 
background-image: -moz-linear-gradient(to top, orange, green); 
background-image: -o-linear-gradient(to top, orange, green); 
background-image: linear-gradient(to top, orange, green);

repeating-linear-gradient 屬性值和 linear-gradient 基本相同，不在贅述。

二．徑向漸變

CSS3 提供了徑向漸變，也叫做放射性漸變：radial-gradient 屬性值。它是從一個點向四周發散的方式擴展。屬性值樣式表如下：

//兩個必選參數

background-image: radial-gradient(orange, green);

//如果想設置第一個可選參數，有一種做法是設置為：cirlce(圓形)或 ellipse(橢圓形)。預設是橢圓形。

background-image: radial-gradient(circle, orange, green);

//不單單可以設置形狀，還可以設置形狀的發散方向 

background-image: radial-gradient(circle at top, orange, green); 

//也可以複合方向，比如右下方

background-image: radial-gradient(circle at right bottom, orange, green);

//可以設置發散的距離，即圓的半徑長度

background-image: radial-gradient(circle closest-side, orange, green); 

//關鍵字有點拗口，可以用像素表示半徑，但不接受百分比 

background-image: radial-gradient(circle 50px, orange, green);

//同樣，也有重覆背景方式

background-image: repeating-radial-gradient(circle 50px, orange, green);

//相容模式

background-image: -webkit-radial-gradient(circle, orange, green); 
background-image: -moz-radial-gradient(circle, orange, green); 
background-image: -o-radial-gradient(circle, orange, green); 
background-image: radial-gradient(circle, orange, green);

//兩個重覆背景只要加上首碼就是相容模式了 

background-image: -webkit-repeating-radial-gradient; 
background-image: -moz-repeating-radial-gradient;
background-image: -o-repeating-radial-gradient;
background-image: repeating-radial-gradient;