如何使用 CSS 和 SVG 在漸層之間建立平滑曲線？

使用CSS 創建漸變之間的平滑曲線

在CSS 中創建漸變之間的平滑曲線可能是一個挑戰，但透過正確的方法，可以取得令人印象深刻的結果。

一種有效的解決方案涉及利用線性漸變與SVG。

考慮以下範例：

.container {
  width: 500px;
  height: 200px;
  background: linear-gradient(to bottom right, #de350b, #0065ff);
}

svg {
  width: 100%;
}

<div class="container">
  <svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 64 64">
    <defs>
      <linearGradient>

在此範例中，我們定義一個具有線性漸變背景的容器 div。然後，我們建立一個 SVG 元素並在其 defs 部分中定義線性漸變。然後將漸層套用為 SVG 中定義的自訂路徑的填滿色彩。

路徑的形狀創造一條 S 狀曲線，無縫連接兩個漸層。透過調整路徑 d 屬性中的控制點 (30, 28) 和 (38, 0)，您可以自訂曲線的形狀和強度。

這種方法比其他技術（例如 border-radius）具有優勢或剪輯路徑，因為它提供了對曲線形狀的完全控制，同時保持響應能力並與所有主要瀏覽器相容。

以上是如何使用 CSS 和 SVG 在漸層之間建立平滑曲線？的詳細內容。更多資訊請關注PHP中文網其他相關文章！