CSS 中的漸變指的是兩種或多種顏色之間的平滑過渡，以前我們必須使用事先定義好的圖像來實現(xiàn)漸變效果，CSS3 為實現(xiàn)漸變效果提供了一種靈活的解決方案。
通過 CSS3 您可以定義三種類型的漸變，分別為線性漸變（通過 linear-gradient() 函數(shù)創(chuàng)建）、徑向漸變（通過 radial-gradient() 函數(shù)創(chuàng)建）和圓錐漸變（通過 conic-gradient() 函數(shù)創(chuàng)建）。另外，您還可以使用 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 函數(shù)來創(chuàng)建重復漸變。
通過 CSS 創(chuàng)建的漸變不僅簡單靈活，而且還省去了使用圖像時所需的加載過程，節(jié)省了網(wǎng)頁的加載時間。另外，通過 CSS 創(chuàng)建的漸變元素可以按任意比例放大或縮小，而且不會降低質量。
1. 線性漸變 linear-gradient()
線性漸變指的是顏色沿一條直線進行漸變（例如右上到下，從左到右等），要創(chuàng)建線性漸變，您至少需要定義兩個色標（色標指的是想要平滑過渡的顏色），若要創(chuàng)建更加復雜的漸變效果，則需要定義更多的色標。創(chuàng)建線性漸變的基本語法如下：
linear-gradient(direction, color-stop1, color-stop2, ...);
參數(shù)說明如下：
direction 可選值，定義漸變的方向（例如從左到右，從上到下），可以是具體角度（例如 90deg），也可以通過 to 加 left、right、top、bottom 等關鍵字來表示漸變方向，例如：
● to left：表示從右到左，相當于 270deg；
● to right：表示從左到右，相當于 90deg；
● to top：表示從下到上，相當于 0deg；
● to bottom：默認值，表示從上到下，相當于 180deg；
● to right bottom：表示從左上到右下；
● to right top：表示從左下到右上；
● to left bottom：表示從右上到左下；
● to left top：表示從右下到左上。
color-stop1、color-stop2、...：表示定義的多個色標，在每個色標中除了可以定義顏色外，還可以通過數(shù)值加單位或者百分比的形式定義顏色的起止位置。
【示例】使用 linear-gradient() 函數(shù)定義線性漸變：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 210px;
height: 50px;
float: left;
margin: 10px;
}
.one {
background: linear-gradient(to right bottom, red, blue 70px);
}
.two {
background: linear-gradient(190deg, #000, #FFF);
}
.three {
background: linear-gradient(red, green, blue);
}
.four {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>運行結果：
2. 徑向漸變 radial-gradient(); 從中心點向往輻射
徑向漸變與線性漸變類型，不同之處在于徑向漸變是由中心向外延申的漸變，您可以指定中心點的位置，也可以設置漸變的形狀。定義徑向漸變的基本語法如下所示：
radial-gradient(shape size at position, color-stop1, color-stop2, ...);
參數(shù)說明如下：
（1）at：一個關鍵字，需要放置在參數(shù) position 的前面；
（2）position：指定漸變起點的坐標，您可以使用數(shù)值加單位、百分比或者關鍵字（例如 left、bottom 等）等形式指定漸變起點的坐標，如果提供 2 個參數(shù)，那么第一個參數(shù)用來表示橫坐標，第二個參數(shù)用來表示縱坐標，如果只提供一個參數(shù)，那么第二個參數(shù)將被默認設置為 50%，即 center；
（3）shape：指定漸變的形狀，可選值為 circle（圓形）、ellipse（橢圓）；
（4）size：指定漸變形狀的大小，除了可以使用具體的數(shù)值來指定 circle、ellipse 的半徑外，還可以使用下面所示的關鍵字來指定漸變形狀的大?。?/p>
● closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；
● closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角；
● farthest-side：默認值，指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊；
● farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角。
（5） color-stop1、color-stop2、...：表示定義的多個色標，在每個色標中除了可以定義顏色外，還可以通過數(shù)值加單位或者百分比的形式定義顏色的起止位置。
【示例】使用 radial-gradient() 函數(shù)定義徑向漸變：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 210px;
height: 100px;
float: left;
margin: 10px;
border: 1px solid black;
}
.one {
background: radial-gradient(circle at 50%, red, yellow, lime);
}
.two {
background: radial-gradient(ellipse 100px 30px at 30%, red, yellow, lime);
}
.three {
background: radial-gradient(circle 100px at 50%, red 10%, yellow 50%, lime 100px);
}
.four {
background: radial-gradient(circle closest-corner at 50px 30px, red, yellow, lime);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>運行結果：
3. 圓錐漸變 conic-gradient(); 圍繞中心點旋轉
圓錐漸變類似于徑向漸變，兩者都有一個中心點作為色標的源點，不同的是圓錐漸變是圍繞中心點旋轉（而不是從中心點向往輻射），定義圓錐漸變的基本語法如下：
conic-gradient(from angle at position, start-color, ..., last-color);
語法說明如下：
（1）from：一個關鍵字，需要放置在參數(shù) angle 之前；
（2）angle：定義圓錐漸變的起始角度，可以為空，默認值為 0deg；
（3）at：一個關鍵字，需要放置在參數(shù) position 之前；
（4）position：定義圓錐漸變錐心的坐標，您可以使用數(shù)值加單位、百分比或者關鍵字（例如 left、bottom 等）等形式指定錐心的坐標，如果提供 2 個參數(shù)，那么第一個參數(shù)用來表示橫坐標，第二個參數(shù)用來表示縱坐標，如果只提供一個參數(shù)，那么第二個參數(shù)將被默認設置為 50%，即 center（居中）；
（5）start-color、...、last-color：表示定義的多個色標，在每個色標中除了可以定義顏色外，還可以通過百分比或者角度來定義顏色的起始位置。
【示例】使用 conic-gradient() 定義圓錐漸變：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 210px;
height: 100px;
float: left;
margin: 10px;
border: 1px solid black;
}
.one {
background: conic-gradient(at 50%, red, orange, yellow, green, blue, indigo, violet, red);
}
.two {
background: conic-gradient(red 0deg 30deg, orange 30deg 50deg, yellow 50deg 200deg, green 200deg 300deg, blue 300deg 360deg);
}
.three {
background: conic-gradient(from 90deg, red 0% 55%, yellow 55% 90%, lime 90% 100%);
}
.four {
/* 轉、圈（Turns）。一個圓共1圈 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad*/
background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>運行結果：
4. 重復漸變 repeating-linear-gradient()
在 CSS 中，您還可以使用 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 等函數(shù)來分別創(chuàng)建線性漸變、徑向漸變和圓錐漸變的重復漸變，所謂重復漸變就是指將漸變的過程重復多次，以鋪滿整個元素。
提示： repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 函數(shù)的語法分別與 linear-gradient()、radial-gradient() 和 conic-gradient() 函數(shù)的語法相同。
【示例】使用 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 三個函數(shù)定義重復漸變：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 210px;
height: 100px;
float: left;
margin: 10px;
border: 1px solid black;
}
.one {
background: repeating-linear-gradient(190deg, #000 0px 10px, #FFF 10px 20px);
}
.two {
background: repeating-radial-gradient(circle 100px at 50%, red 0% 10%, yellow 10% 30%, lime 30% 40%);
}
.three {
background: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);
}
.four {
background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) top left / 25% 25% repeat;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>運行結果：
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍橋杯競賽優(yōu)秀選手錄制的視頻教程，并配有習題和答疑，點擊了解：
一點編程也不會寫的：零基礎C語言學練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進階課程
從零到寫出一個爬蟲的Python編程課程
只會語法寫不出代碼？手把手帶你寫100個編程真題的編程百練課程
信息學奧賽或C++選手的 必學C++課程
藍橋杯ACM、信息學奧賽的必學課程：算法競賽課入門課程
手把手講解近五年真題的藍橋杯輔導課程