CSS3 漸變
漸變（gradients）可以在兩個或多個指定的顏色之間顯示平穩的過渡。
兼容性：IE10+，Chrome26+，FireFox16+，Safari6.1+，Opera12.1+
CSS3線性漸變
線性漸變屬性（Linear Gradients）是沿著一根軸線改變顏色，從起點到終點顏色進行順序漸變（從一邊拉向另一邊）
語法：
background: linear-gradient(direction,color-stop1,color-stop2,…….);
其共有三個參數，第一個參數表示線性漸變的方向，top 是從上到下、left 是從左到右，如果定義成 left top，那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的參數，表示多種顏色的漸變。

還可以使用角度：background: linear-gradient(angle,color-stop1,color-stop2,…….);
角度說明
角度是指水平線和漸變線之間的角度，逆時針方向計算。

線性漸變顏色節點
background:linear-gradient(color1 length|percent,color2 length|percent……)
.divOne {
background: linear-gradient( red, green, blue);
}
.divTwo {
background: linear-gradient( red 10%, green 85%, blue 90%);
}
.divThree {
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

代碼效果如下圖：

線性漸變-重復漸變
語法：
background:repeating-linear-gradient(color1 length|percentage,color2 length|percentage…);
CSS3徑向漸變
從起點到終點顏色從內到外進行圓形漸變（從中間向外拉）
語法：
background:radial-gradient(center,shape size,start-color,……,last-color);

顏色結點不均勻分布
語法：
background:radial-gradient(start-color length|percentage,……,last-color length|percentage);

徑向漸變設置形狀
語法：
background:radial-gradient(shape start-color,……,last-color);
circle —– 圓形
elipse —- 橢圓（默認）

徑向漸變尺寸大小關鍵字
語法：
background:radial-gradient(size， start-color,……,last-color);
closest-side :最近邊 farthest-side: 最遠邊
closest-corner: 最近角 farthest-corner: 最遠角

徑向漸變-重復漸變
語法：background:repeating-radial-gradient(color1 length|percentage,color2 length|percentage…);

CSS3 漸變