CSS 中的漸變指的是兩種或多種顏色之間的平滑過渡，以前我們必須使用事先定義好的圖像來實現漸變效果，CSS3 為實現漸變效果提供了一種靈活的解決方案。
透過CSS3 您可以定義三種類型的漸變，分別為線性漸變（透過linear-gradient() 函數建立）、徑向漸變（透過radial-gradient() 函數建立）和圓錐漸變（透過conic-gradient() 函數創建）。另外，您也可以使用repeating-linear-gradient()、repeating-radial-gradient() 和repeating-conic-gradient() 函數來建立重複漸層。
透過CSS 創建的漸變不僅簡單靈活，而且還省去了使用圖像時所需的載入過程，節省了網頁的載入時間。另外，透過CSS 創建的漸變元素可以任意比例放大或縮小，而且不會降低品質。
1. 線性漸層linear-gradient()
線性漸變指的是顏色沿著一條直線進行漸變（例如右上到下，從左到右等），要創建線性漸變，您至少需要定義兩個色標（色標指的是想要平滑過渡的顏色） ，若要創造出更複雜的漸層效果，則需要定義更多的色標。建立線性漸層的基本語法如下：
linear-gradient(direction,color-stop1,color-stop2,...);
參數說明如下：
direction 可選值，定義漸變的方向（例如從左到右，從上到下），可以是具體角度（例如90deg），也可以透過to 加left、right、top、bottom 等關鍵字來表示漸變方向，例如：
● to left：表示由右到左，相當於270deg；
● to right：表示由左到右，相當於90deg；
● to top：表示由下往上，相當於0deg；
● to bottom：預設值，表示從上到下，相當於180deg；
● to right bottom：表示由左上到右下；
● to right 頂：表示由左下到右上；
● to left bottom：表示從右上到左下；
● to left 頂：表示從右下到左上。
color-stop1、color-stop2、...：表示定義的多個色標，在每個色標中除了可以定義顏色外，還可以透過數值加單位或百分比的形式定義顏色的起止位置。
【範例】使用linear-gradient() 函數定義線性漸層：
<!DOCTYPEhtml><html><head><style>div{width:210px;height:50px;float:left;margin:10px;}.one{background:linear-gradi ent(torightbottom,red,blue70px);}.two{background:linear-gradient(190deg,#000,#FFF);}.three{background:linear-grad ient(red,green,blue);}.four{background:linear-gradient(toright,red,orange,yellow,green,blue,indigo,violet);}</style></head><body><divclass =one></div><divclass=two></div><divclass=three></div><divclass=four></div></body></html>運行結果：
2. 徑向漸層radial-gradient(); 從中心點嚮往輻射
徑向漸層與線性漸變類型，不同之處在於徑向漸層是由中心向外延申的漸變，您可以指定中心點的位置，也可以設定漸層的形狀。定義徑向漸層的基本語法如下：
radial-gradient(shapesizeatposition,color-stop1,color-stop2,...);
參數說明如下：
（1）at：一個關鍵字，需要放置在參數position 的前面；
（2）position：指定漸變起點的座標，您可以使用數值加單位、百分比或關鍵字（例如left、bottom 等）等形式指定漸變起點的座標，如果提供2 個參數，那麼第一個參數用來表示橫座標，第二個參數用來表示縱座標，如果只提供一個參數，那麼第二個參數將被預設為50%，即center；
（3）shape：指定漸變的形狀，可選值為circle（圓形）、ellipse（橢圓）；
（4）size：指定漸變形狀的大小，除了可以使用特定的數值來指定circle、ellipse 的半徑外，還可以使用下面所示的關鍵字來指定漸變形狀的大小：
●closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；
●closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角；
●farthest-side：預設值，指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊；
●farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角。
（5） color-stop1、color-stop2、...：表示定義的多個色標，在每個色標中除了可以定義顏色外，還可以透過數值加單位或百分比的形式定義顏色的起止位置。
【範例】使用radial-gradient() 函數定義徑向漸層：
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{background:radial- gradient(circleat50%,red,yellow,lime);}.two{background:radial-gradient(ellipse100px30pxat30%,red,yellow,lime);}.three{background:r adial-gradient(circle100pxat50%,red10%,yellow50%,lime100px);}.four{background:radial-gradient(circleclosest-cornerat50px30px,red,y ellow,lime);}</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four>< /div></body></html>運行結果：
3. 圓錐漸層conic-gradient(); 圍繞中心點旋轉
圓錐漸變類似於徑向漸變，兩者都有一個中心點作為色標的源點，不同的是圓錐漸變是圍繞中心點旋轉（而不是從中心點嚮往輻射），定義圓錐漸變的基本語法如下：
conic-gradient(fromangleatposition,start-color,...,last-color);
文法說明如下：
（1）from：一個關鍵字，需要放置在參數angle 之前；
（2）angle：定義圓錐漸變的起始角度，可以為空，預設值為0deg；
（3）at：一個關鍵字，需要放置在參數position 之前；
（4）position：定義圓錐漸層錐心的座標，您可以使用數值加單位、百分比或關鍵字（例如left、bottom 等）等形式指定錐心的座標，如果提供2 個參數，那麼第一個參數用來表示橫座標，第二個參數用來表示縱座標，如果只提供一個參數，那麼第二個參數將被預設為50%，即center（居中）；
（5）start-color、...、last-color：表示定義的多個色標，在每個色標中除了可以定義顏色外，還可以透過百分比或角度來定義顏色的起始位置。
【範例】使用conic-gradient() 定義圓錐漸層：
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{background:conic-gradient(at50%,red, orange,yellow,green,blue,indigo,violet,red);}.two{backg round:conic-gradient(red0deg30deg,orange30deg50deg,yellow50deg200deg,green200deg300deg,blue300deg360de g);}.three{background:conic-gradient(from90deg,red0%55%,yellow55%90%,lime90%100%);}.four{/*轉、圈（Turns）。一個圓共1圈90deg=100grad=0.25turn≈1.570796326794897rad*/background:conic-gradient(#fff0.25turn,#0000.25turn0.5turn,#fff0.5turn0.75turn,# 0000.75turn);}</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four></ div></body></html>運行結果：
4. 重複漸層repeating-linear-gradient()
在CSS 中，您也可以使用repeating-linear-gradient()、repeating-radial-gradient() 和repeating-conic-gradient() 等函數來分別建立線性漸變、徑向漸層和圓錐漸變的重複漸變，所謂重複漸層就是指將漸層的過程重複多次，以鋪滿整個元素。
提示： repeating-linear-gradient()、repeating-radial-gradient() 和repeating-conic-gradient() 函數的語法分別與linear-gradient()、radial-gradient() 和conic-gradient() 函數的語法相同。
【範例】使用repeating-linear-gradient()、repeating-radial-gradient() 和repeating-conic-gradient() 三個函數定義重複漸層：
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{background:repeating-linear-gradien t(190deg,#0000px10px,#FFF10px20px);}.two{background:repeating-radial-gradient(circle100pxat50%,red0%10%,yellow10%30%,lime30%40%); :repeating-conic-gradient(#69f036deg,#fd44ff36deg72deg);}.four{background:conic-gradient(#fff0.25turn,#0000.25turn0.5turn,#fff0.5turn0.75,#0000.25turn0.5turn,#fff0.5turn0.75,#000. .75turn)topleft/25%25%repeat;}</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div> <divclass=four></div></body></html>運行結果：
