css3提供了linear-gradient屬性實現背景顏色的漸變功能。在以前，這種效果必須採用才能實現的。
方位可選引數，漸變的方位。可以使用的值有：to top、to top right、to right、to bottom、to bottom left、to left、to top left。
起始色必選引數，顏色值
末尾色必選引數，顏色值
//兩個必須引數
//增加乙個方位
通過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:-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屬性值。它是從乙個點向四周發散的方式擴充套件。
方位可選引數，徑向的方位。可以使用的值有：畫素、百分比、固定值，或復合搭配使用
起始色必選引數，顏色值
末尾色必選引數，顏色值
//兩個必選引數
//如果想設定第乙個可選引數，有一種做法是設定為：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(circleatrightbottom,orange,green);
//可以設定發散的距離，即圓的半徑長度
closest-side指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
closest-corner指定徑向漸變的半徑長度為從圓心到離圓心最近的角
farthest-side指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
farthest-corner指定徑向漸變的半徑長度為從圓心到離圓心最遠的角
//關鍵字有點拗口，可以用畫素表示半徑，但不接受百分比background-image: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漸變效果
一.線性漸變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...
CSS3 設定漸變效果
值 說明to top 從下到上漸變 to bottom 從上到下漸變 to left 從右到左漸變 to right 從左到右漸變 to top left 從右下方到左上方漸變 to top right 從左下方到右上方漸變 to bottom left 從右上方到左下方漸變 to bottom r...