8.1 線性漸變 (linear-gradient)
CSS 中的漸變可以讓兩種或多種顏色之間產生平滑的過渡。它們可用於背景、按鈕和其他元素，以增加視覺深度和吸引力。在 CSS 中，有兩種主要的漸變類型：線性 (linear-gradient) 和放射 (radial-gradient)。
線性漸變沿著直線創建顏色之間的平滑過渡。可以精確調整線的方向和顏色過渡。
語法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
其中：
direction: 漸變的方向。可以用角度表示（例如：45deg）或關鍵詞（to right,to bottom, 等）color-stop: 定義漸變中顏色及其位置
範例 1: 簡單的線性漸變
此範例中，漸變從紅色漸變到藍色，從右到左：
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, red, blue);
}
範例 2: 帶角度的線性漸變
此範例中，漸變以 45 度角從黃色到綠色：
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(45deg, yellow, green);
}
範例 3: 多色線性漸變
此範例中，漸變從上到下，平滑過渡四種顏色：紅色、黃色、綠色和藍色：
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to bottom, red, yellow, green, blue);
}
範例 4: 帶控制點的線性漸變
此範例中指定了控制點，這些控制點確定漸變中每個顏色的確切位置：
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}
8.2 放射漸變 (radial-gradient)
放射漸變從中心或指定點進行顏色的平滑過渡，漸變以圓形或橢圓形擴展。
語法：
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
其中：
shape: 漸變的形狀 (circle或ellipse)size: 漸變的大小 (closest-side,farthest-side,closest-corner,farthest-corner)position: 漸變中心的位置（可以用像素、百分比或關鍵詞來表示，例如center,top,left等）color-stop: 定義漸變中顏色及其位置
範例 1: 簡單的放射漸變
此範例中，從圓心開始，漸變從紅色到藍色：
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle, red, blue);
}
範例 2: 不同位置的放射漸變
此範例中，放射漸變的中心偏向左上角，從黃色到綠色：
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle at top left, yellow, green);
}
範例 3: 多色放射漸變
此範例中，從圓心開始，漸變平滑過渡四種顏色：紅色、黃色、綠色和藍色：
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle, red, yellow, green, blue);
}
範例 4: 帶控制點的放射漸變
此範例中指定了控制點，以確定每種顏色在漸變中的確切位置：
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle at center, red 0%, yellow 25%, green 50%, blue 100%);
}
8.3 複合漸變範例
範例 1: 帶半透明度的線性漸變
此範例使用半透明度來創建從半透明紅色到半透明藍色的漸變：
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
}
範例 2: 帶尺寸的放射漸變
此範例中，創建了一個橢圓形的放射漸變，填滿元素的最近一側：
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(ellipse closest-side, red, blue);
}
範例 3: 按鈕的漸變效果
漸變效果可以讓按鈕更具吸引力。此漸變從上到下，從淺綠色到深綠色，為按鈕增添立體感和深度：
<button type="button" class="button">Button</button>
.button {
background: linear-gradient(to bottom, #4caf50, #2e7d32);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
}
使用漸變的優勢：
1. 視覺吸引力。 漸變讓顏色之間的過渡更流暢，為設計元素增加了視覺深度和吸引力。
2. 彈性。 漸變可以用於創建多種效果，從簡單的過渡到複雜的多色背景。
3. 支持響應式設計。 漸變可以輕鬆適應不同大小的屏幕和分辨率，這使它們非常適合用於創建響應式網頁設計。
GO TO FULL VERSION