CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。
漸變不是一個css屬性，可以把它看成一個函數，通過傳入參數（漸變方向和顏色）來返回一個視覺效果
一般用在background屬性中，注意，不能用在background-color中
1.線型漸變 linear-gradient
基本用法:可以傳入顏色值，也可以傳入16進制顏色值，還可以是rgba()
background: linear-gradient(red, green, blue);
/* background: linear-gradient(#ff0000, #00ff00, #0000ff); */
2.設置線型漸變方向（最新的Chrome，火狐，IE11已支持W3C標准），可用值：
關鍵字(推薦)：to right / to bottom / to left / to top
角度值： 0deg 360deg
默認值to bottom（180deg）
background: linear-gradient(to left,red, green, blue);
background: linear-gradient(0deg,red, green, blue);
直接上圖
瀏覽器私有前綴標准（瀏覽器私有前綴標准的坐標系和W3C標准不一樣，但是默認效果是一樣的，默認240deg。但他是逆時針的）
background: -webkit-linear-gradient(0deg,red, green, blue);
background: -moz-linear-gradient(0deg,red, green, blue);
background: -ms-linear-gradient(0deg,red, green, blue);
PS:個人推薦使用W3C的關鍵字（例如to right）來控制漸變的方向，看字面就很容易分辨。如果是使用角度的話，無論是初始角度還是旋轉方向都不容易記憶，不推薦。
3.設置漸變界限
為相應的顏色區域設置一個數值（0%-100%），來表示他的顏色區域中心點的坐標。通過他可以調整相鄰顏色之間漸變區間的大小
background: linear-gradient(90deg, red,green,yellow);
//相當於
background: linear-gradient(90deg, red 0,green 50%,yellow 100%);
//green漸變到yellow的區間變大了，占據了整個容器75%的寬度
background: linear-gradient(90deg, red,green 25%,yellow);
//相當於
background: linear-gradient(90deg, red 0,green 25%,yellow 100%);
background: linear-gradient(90deg, red,green 25%);
//相當於
background: linear-gradient(90deg, red 0,green 25%,green 100%);
4.設置重復漸變
background: repeating-linear-gradient(90deg,white,white 10%,black 10%,black 20%);
5.徑向漸變 radial-gradient
定義：徑向漸變由一個中心點沿着四周產生漸變效果
決定它的效果的有幾個因素：漸變的形狀，漸變的大小，漸變中心的坐標，還有漸變的顏色
W3C寫法：
background:radial-gradient(shape size at x y,color1,color2)
background: radial-gradient(red,yellow);
6.漸變的形狀（可選）
他有兩個可能的值：
ellipse：(默認)指會自動適應容器的形狀，一般為橢圓
circle：正圓
background: radial-gradient(circle,red,green,lightblue);
ellipse效果：
circle效果
7.漸變中心的坐標，默認為容器中心點(可選)
可選值:top/right/left/bottom/center 50% 50px
8.漸變的大小
它可以是以下四個值：
closest-side 以最近的邊到漸變中心的距離為半徑，外圍部分以最后面的顏色補全
farthest-side 以最遠的邊到漸變中心的距離為半徑，其余部分以最后面的顏色補全
closest-corner 以最近的角到漸變中心的距離為半徑，外圍部分以最后面的顏色補全
farthest-corner 以最遠的角到漸變中心的距離為半徑，外圍部分以最后面的顏色補全（默認）
background: radial-gradient(circle closest-side,red,green,lightblue);