CSS顏色漸變是使顏色之間的過渡更加平穩。
1、漸變的方式有兩類：
線性（Liner Gradients）、圓形（Radial Gradients）
2、基本語法：
1 background: linear-gradient(漸變的方向,漸變的顏色1,漸變的顏色2,漸變的顏色3,...);
1 background: radial-gradient(漸變的方向,漸變的顏色1,漸變的顏色2,漸變的顏色3,...);
3、
1)、線性：
代碼：
1 <div> 2 <h5 style="text-align: center">線性漸變</h5> 3 <p>從上到下</p> 4 <div style="width: 200px;height: 200px;background: linear-gradient(to bottom,red,blue);"></div> 5 <p>從左到右</p> 6 <div style="width: 200px;height: 200px;background: linear-gradient(to right,red,blue);"></div> 7 <p>對角線(左上到右下)</p> 8 <div style="width: 200px;height: 200px;background: linear-gradient(to bottom right,red,blue)"></div> 9 </div>
效果圖：
2)、圓形：
代碼：
1 <div> 2 <h5 style="text-align: center">線性漸變</h5> 3 <p>橢圓形</p> 4 <div style="width: 200px;height: 200px;background: radial-gradient(ellipse,red,blue);"></div> 5 <p>圓形</p> 6 <div style="width: 200px;height: 200px;background: radial-gradient(circle,red,orange,yellow,blue);"></div> 7 <p>橢圓形(多色)</p> 8 <div style="width: 200px;height: 200px;background: radial-gradient(ellipse,red,orange,yellow,green,blue,purple)"></div> 9 <p>顏色不均勻分布</p> 10 <div style="width: 200px;height: 200px;background: radial-gradient(ellipse,red 10%,orange 20%,yellow 30%,green 40%)"></div> 11 </div>
效果圖：
--------------------------------------------------------
更多細節可以參考css3漸變教程：http://www.runoob.com/css3/css3-gradients.html