5.1 線性漸層
漸層是網頁設計中的一個強大工具，可以在不使用圖像的情況下創建顏色之間的平滑過渡。CSS 提供了兩種主要類型的漸層：線性 (linear-gradient) 和放射性 (radial-gradient)。這些漸層可以用於元素背景、按鈕創建和其他視覺效果。
線性漸層 (linear-gradient)
線性漸層在一條指定的路徑（軸）上創建兩個或多個顏色之間的平滑過渡。這條路可以是水平、垂直或任何角度。
語法
background: linear-gradient( direction, color-stop1, color-stop2, ...);
值
direction: 漸層的方向。可以用度數指定（例如，90deg），或使用關鍵字（例如to right，to bottom left）color-stop: 顏色停靠點，定義顏色及其在漸層中的位置
用例
水平漸層：
CSS
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
HTML
<body>
<div class="linear-gradient-horizontal">水平漸層</div>
</body>
垂直漸層：
CSS
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
HTML
<body>
<div class="linear-gradient-vertical">垂直漸層</div>
</body>
對角漸層：
CSS
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
HTML
<body>
<div class="linear-gradient-diagonal">對角漸層</div>
</body>
多色漸層：
CSS
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
HTML
<body>
<div class="linear-gradient-multi">多色漸層</div>
</body>
代碼解釋：
to right: 漸層從左到右to bottom: 漸層從上到下45deg: 漸層以 45 度角進行red,yellow,green,blue: 創造多色漸層的多個顏色停靠點
5.2 放射性漸層
radial-gradient 創建顏色之間的平滑過渡，從中心發散到圓形或橢圓的邊緣。放射性漸層可以創造出有趣的視覺效果，例如模擬三維效果。
語法：
background: radial-gradient( direction, color-stop1, color-stop2, ...);
值：
shape: 漸層的形狀，可以是circle（圓形）或ellipse（橢圓）（默認值）size: 漸層的大小，可以是closest-side、closest-corner、farthest-side、farthest-cornerposition: 漸層中心的位置，可以是百分比、像素或使用關鍵字（例如center、top、left）color-stop: 顏色停靠點，定義顏色及其在漸層中的位置
用例
圓形漸層：
CSS
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
HTML
<body>
<div class="radial-gradient-circle">圓形漸層</div>
</body>
橢圓漸層：
CSS
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
HTML
<body>
<div class="radial-gradient-ellipse">橢圓漸層</div>
</body>
中心漸層：
CSS
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
HTML
<body>
<div class="radial-gradient-at-center">中心漸層</div>
</body>
角落漸層：
CSS
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
HTML
<body>
<div class="radial-gradient-at-corner">角落漸層</div>
</body>
代碼解釋：
circle: 創建圓形漸層ellipse: 創建橢圓漸層at center: 漸層從中心開始at top left: 漸層從左上角開始red,blue,green: 多個顏色停靠點以創建多色漸層
5.3 漸層的附加設置
重複漸層
1. 重複線性漸層 (repeating-linear-gradient)
重複線性漸層創建具有線性漸層的重複圖案。
CSS
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. 重複放射性漸層 (repeating-radial-gradient)
CSS
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. 透明顏色停靠點
顏色停靠點可以包含透明度，以創造更複雜的視覺效果。
CSS
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. 多重漸層的使用
可以使用多重漸層來創建複雜的背景。
CSS
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
GO TO FULL VERSION