一、漸變背景色（Gradient Background）

1. 線性漸變（Linear Gradient）

通過 linear-gradient 創建從一種顏色到另一種顏色的線性漸變。

代碼示例

<div class="linear-gradient"></div><style>
.linear-gradient {width: 300px;height: 200px;background: linear-gradient(to right, red, blue);
}
</style>

說明

• to right?表示從左到右的漸變方向。
• 可以添加多個顏色停點（如?linear-gradient(to right, red, yellow, blue)）。
• 支持透明度（rgba(...)）。

---

2. 徑向漸變（Radial Gradient）

通過 radial-gradient 創建從中心向外輻射的漸變。

代碼示例

<div class="radial-gradient"></div><style>
.radial-gradient {width: 300px;height: 200px;background: radial-gradient(circle, red, blue);
}
</style>

說明

• circle?表示圓形漸變，也可用?ellipse（橢圓）。
• 可指定漸變半徑（如?radial-gradient(circle at center, red, blue)）。

---

3. 重復漸變（Repeating Gradient）

通過 repeating-linear-gradient 或 repeating-radial-gradient 創建重復的漸變效果。

代碼示例

<div class="repeating-gradient"></div><style>
.repeating-gradient {width: 300px;height: 200px;background: repeating-linear-gradient(45deg,red,red 10px,blue 10px,blue 20px);
}
</style>

說明

• 45deg?表示漸變方向。
• red 10px, blue 10px?表示每 10px 重復一次顏色。

---

4. 多色漸變（Multi-Color Gradient）

通過添加多個顏色停點實現多色漸變。

代碼示例

<div class="multi-color-gradient"></div><style>
.multi-color-gradient {width: 300px;height: 200px;background: linear-gradient(to bottom right, red, orange, yellow, green, blue);
}
</style>

---

二、漸變字體顏色（Gradient Text Color）

1. 背景剪裁 + 透明填充（background-clip?+?text-fill-color）

通過將漸變作為背景并裁剪到文字區域，結合透明填充實現漸變字體。

代碼示例

<h1 class="gradient-text">漸變字體效果</h1><style>
.gradient-text {font-size: 48px;font-weight: bold;background: linear-gradient(90deg, red, blue);-webkit-background-clip: text;color: transparent;
}
</style>

說明

• -webkit-background-clip: text?將背景裁剪到文字區域。
• color: transparent?使文字透明，顯示背景漸變。
• 兼容性：僅支持 WebKit 內核瀏覽器（Chrome、Safari）。

---

2. 遮罩漸變（mask-image）

通過 mask-image 和 linear-gradient 實現漸變字體。

代碼示例

<h1 class="masked-gradient">漸變字體效果</h1><style>
.masked-gradient {font-size: 48px;font-weight: bold;color: red;-webkit-mask-image: linear-gradient(to right, red, transparent);
}
</style>

說明

• mask-image?通過漸變遮罩控制顏色分布。
• 兼容性：僅支持 WebKit 內核瀏覽器。

---

3. SVG 漸變（SVG Gradient）

通過嵌入 SVG 元素定義漸變并應用到文字上。

代碼示例

<svg width="500" height="100"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:red;stop-opacity:1" /><stop offset="100%" style="stop-color:blue;stop-opacity:1" /></linearGradient></defs><text fill="url(#grad1)" font-size="60" x="0" y="70">Gradient Text</text>
</svg>

說明

• 在 SVG 中定義?linearGradient?并通過?fill="url(#grad1)"?應用到文字。
• 優點：兼容性較好，適合復雜漸變需求。

---

三、其他技巧

1. 動態漸變動畫

結合 @keyframes 和 clip-path 實現漸變動畫效果。

代碼示例

<h1 class="animated-gradient">動態漸變字體</h1><style>
.animated-gradient {font-size: 48px;font-weight: bold;background: linear-gradient(90deg, red, blue);-webkit-background-clip: text;color: transparent;clip-path: circle(0% at 50% 50%);animation: expand 5s linear infinite;
}@keyframes expand {to {clip-path: circle(100% at 50% 50%);}
}
</style>

---

四、方法對比與選擇建議

方法	適用場景	優點	缺點
線性/徑向漸變	背景色設計	簡單易用，兼容性好	無法直接應用到文字
background-clip?+?text-fill-color	文字漸變	實現簡單，視覺效果強	僅支持 WebKit 瀏覽器
mask-image	文字漸變	靈活控制漸變方向	僅支持 WebKit 瀏覽器
SVG 漸變	文字/復雜漸變	兼容性好，支持復雜效果	實現較復雜，需嵌入 SVG
重復漸變	背景紋理	可創建重復圖案	需精確控制顏色停點

---

五、注意事項

1. 兼容性：
   • background-clip: text?和?mask-image?僅在 WebKit 瀏覽器中支持。
   • 對于兼容性要求高的項目，可使用 SVG 方法。
2. 性能：
   • 復雜漸變可能影響渲染性能，需合理使用。
3. 透明度：
   • 使用?rgba(...)?可實現透明漸變效果。

通過以上方法，可以根據需求靈活選擇實現漸變背景色或漸變字體顏色的方案！