通過(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%);
`
