通過(guò)使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用突雪。此外惹想，漸變效果的元素在放大時(shí)看起來(lái)效果更好，因?yàn)闈u變（gradient）是由瀏覽器生成的垄分。
叢本質(zhì)上來(lái)說(shuō)薄湿，既然 background-image 屬性中的漸變是瀏覽器生成的圖片，可以使用其他CSS背景屬性來(lái)控制它們坐求，就像對(duì)待其他圖片那樣桥嗤。比方說(shuō)砸逊，可以使用 background-size 屬性來(lái)控制漸變的尺寸豆混， background-repeat 來(lái)控制是否將其平鋪员辩。
IE9之前的版本不支持漸變
CSS3 定義了兩種類型的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
1. linearGradient-線性漸變
語(yǔ)法：
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
- []表示一個(gè)字符類奠滑，這里，你可以理解為一個(gè)小單元杰赛。
- |表示候選根时。也就是“或者”的意思，要么前面的忘苛，要么就后面的扎唾。
- ?為量詞，表示0個(gè)或1個(gè)纸镊，言外之意就是，你可以不指定方向岔冀，直- 接漸變色走起罐呼。例如：
background:linear-gradient(red, yellow);
就是從上往下的紅黃條紋效果奉呛。 - +也是量詞登馒，表示1個(gè)或者更多個(gè)罗晕。因此小渊，終止顏色是不可缺少的半等。例如：linear-gradient(red)是醬油命，白板切距。
- <>中的是關(guān)鍵字，主要是讓開發(fā)人員知道這里應(yīng)該放些什么內(nèi)容葡幸。
1. angle
使用angles
參數(shù)釋義如下，‘0deg’指向上面掠归，同時(shí)正角度順時(shí)針旋轉(zhuǎn)，因此‘90deg’指向右邊领曼。這個(gè)角度與我們平時(shí)在ps中的角度是不一樣的。在ps中单刁，90deg的漸變是從上自下的肺樟。
角度坐標(biāo)與位置關(guān)系
漸變的起點(diǎn)和終點(diǎn)（默認(rèn)）在過(guò)中心的漸變線的垂直線上：
2. side-or-corner
可選值：
left, right, top, bottom, left top, left bottom, right top, right bottom. 分別表示卡儒，從左往右硬爆，從右往左，從上往下虐骑，從下往上廷没，從左上往右下，從…
加前綴的瀏覽器可以直接寫： left， right...
而標(biāo)準(zhǔn)語(yǔ)法要加 to ：to right, to left, to bottom, to top, to bottom left...
3.color-stop
顏色結(jié)點(diǎn)文判，語(yǔ)法：顏色值+空格+百分比或長(zhǎng)度值。例如red 100px或者red 10%戏仓。
百分比或長(zhǎng)度值: 表示距離起始點(diǎn)的長(zhǎng)度。
例如：linear-gradient(to right, #62C292 0%, #F8CBAD 50%, #62C292 100%);
多個(gè)漸變顏色的實(shí)例:
使用透明度（transparent）
CSS3 漸變也支持透明度（transparent）敷待，可用于創(chuàng)建減弱變淡的效果仁热。
為了添加透明度，我們使用 rgba() 函數(shù)來(lái)定義顏色結(jié)點(diǎn)。rgba() 函數(shù)中的最后一個(gè)參數(shù)可以是從 0 到 1 的值钳幅，它定義了顏色的透明度：0 表示完全透明炎滞，1 表示完全不透明册赛。
background: -webkit-linear-gradient(left, rgba(104,193,147,0), rgba(104,193,147,1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(104,193,147,0), rgba(104,193,147,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(104,193,147,0), rgba(104,193,147,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, rgba(104,193,147,0), rgba(104,193,147,1)); /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */```
___
####更多栗子??：
**用漸變屬性震嫉，制作兩條裝飾線。**
linear-gradient(
rgba(0,0,0,0) 10%,
62C292 10%,
62C292 14%,
rgba(0,0,0,0) 14%,
rgba(0,0,0,0) 86%,
62C292 86%,
62C292 90%,
rgba(0,0,0,0) 90%)
rgba(0,0,0,0)-制作全透明的空白部分票堵。用百分比來(lái)繪制色塊所處的位置。
**顏色分三塊**
background: linear-gradient(
#62C292 30%,
#F8CBAD 30%,
#F8CBAD 70%,
#62C292 70%)
**顏色分二塊**
background: linear-gradient(
#62C292 50%,
#F8CBAD 50%
)
**背景紋理-1**
background: linear-gradient(
45deg,
rgba(0, 0, 0, 0) 10%,
rgba(0, 0, 0, 0.1) 10%,
rgba(0, 0, 0, 0.1) 90%,
rgba(0, 0, 0, 0) 90%),
linear-gradient(
white, white); /*白色背景*/
background-size: /*背景尺寸*/
50px 50px,
cover; /*白色背景*/
**背景紋理-2**
background: linear-gradient(
45deg,
rgba(0, 0, 0, 0) 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
rgba(0, 0, 0, 0) 60%),
linear-gradient(
white, white); /*白色背景*/
background-size: /*背景尺寸*/
8px 8px,
cover; /*白色背景*/
####重復(fù)的線性漸變
repeating-linear-gradient() 函數(shù)用于重復(fù)線性漸變：
`background: repeating-linear-gradient( 45deg, #E6E6E6, #FFF 20%);
`
