學習要點：
1.線性漸變
2.徑向漸變
主講教師：李炎恢
本章主要** html5 中 css3 背景漸變功能，主要有兩種漸變方式：線性漸變和徑向（放射性）漸變。
一．線性漸變
linear-gradient(方位, 起始色, 末尾色)
方位可選引數，漸變的方位。可以使用的值有：to top、to top right、to right、to bottom、to bottom left、to left、to top left。
起始色必選引數，顏色值
末尾色必選引數，顏色值
//兩個必須引數
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);
opera
firefox
chrome
safari
ie
部分支援需帶字首
11.5無4
~ 94 ~ 5
無支援需帶字首
無3.6 ~ 15
10~ 25
5.1 ~ 6
無支援不帶字首
12.1+
16+26+
6.1+
10.0+
這裡提到了部分支援，說明當時可能漸變還尚未完善，但可以通過新增字首來使用它了。具體哪些沒完善，已經無法考證了，版本太過久遠。那麼支援帶字首和不支援帶字首的完整格式如下：
//加上相容字首
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 屬性值。它是從乙個點向四周發散的方式擴充套件。屬性值樣式表如下：
radial-gradient(方位, 起始色, 末尾色)
方位可選引數，徑向的方位。可以使用的值有：畫素、百分比、固定值，或復合搭配使用
起始色必選引數，顏色值
末尾色必選引數，顏色值
//兩個必選引數
background-image: radial-gradient(orange, green);
//如果想設定第乙個可選引數，有一種做法是設定為：cirlce(圓形)或 ellipse(橢圓形)。預設是橢圓形。
background-image: radial-gradient(circle, orange, green);
形狀
說明
circle
圓形ellipse
橢圓形，預設值
//不單單可以設定形狀，還可以設定形狀的發散方向
background-image: radial-gradient(circle at top, orange, green);
方向
說明
top從頂部發散
left
從左側發散
right
從右側發散
bottom
從底部發散
center
從中間發散
//也可以復合方向，比如右下方
background-image: radial-gradient(circle at right bottom, orange, green);
//可以設定發散的距離，即圓的半徑長度
background-image: radial-gradient(circle closest-side, orange, green);
半徑關鍵字
說明
closest-side
指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
closest-corner
指定徑向漸變的半徑長度為從圓心到離圓心最近的角
farthest-side
指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
farthest-corner
指定徑向漸變的半徑長度為從圓心到離圓心最遠的角
//關鍵字有點拗口，可以用畫素表示半徑，但不接受百分比
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;
CSS3漸變效果
css3提供了linear gradient屬性實現背景顏色的漸變功能。在以前，這種效果必須採用才能實現的。方位可選引數，漸變的方位。可以使用的值有 to top to top right to right to bottom to bottom left to left to top left。起...
CSS3漸變效果
一.線性漸變linear gradient 1.使用方法 background webkit linear gradient red,blue background moz linear gradient red,blue background linear gradient red,blue 2....
CSS3中漸變效果
1.線性漸變 a 從左到右漸變 div nth child 1 b 不指定方向預設是從上到下 div nth child 2 c 按照指定角度 div nth child 3 d 斑馬線漸變 2.頸項漸變 radial gradient 輻射半徑，中心的位置，起始顏色，終止顏色 中心點位置 at l...