使用圓角漸層建立酷炫邊框

錐形漸層可用來產生一些有趣的效果,例如這個不錯的邊框例子。

CodePen 是由 Adam 建立的 Argyle 最初透過以下方式分享: Twitter 上的 Tweet, 示範如何使用 Conic 梯度 建立邊框。

.conic-gradient-border {
  border: 25px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    hsl(100 100% 60%),
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  );
}

Terry Mun 發揮創意 分支 Adam 的 Codepen 創作 CodePen:將滑鼠移至 這樣就會看到漸層變化 更新儲存旋轉角度的 CSS 自訂屬性。

這些範例使用 border-image-source敬上 資源。這個屬性會設定用來建立元素的 邊框。和其他接受圖片值的屬性一樣,任何 CSS 漸層色 類型也有效。

border-image-source

瀏覽器支援

  • Chrome:15.
  • Edge:12.
  • Firefox:15。
  • Safari:6.

資料來源

錐形漸層

瀏覽器支援

  • Chrome:69.
  • Edge:79,
  • Firefox:83。
  • Safari:12.1.

資料來源