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

您可以使用圓錐漸層來創造有趣的效果，例如這裡的邊框範例。

這個由 Adam Argyle 建立的 CodePen 最初是透過 Twitter 上的這則推文分享，說明如何使用圓錐漸層建立邊框。

.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。將滑鼠游標移至元素上，您會看到漸層變化，這是因為 JavaScript 會更新儲存旋轉角度的 CSS 自訂屬性。

這些範例使用 border-image-source 屬性。這項屬性會設定用於建立元素邊框的來源圖片。與其他接受圖片值的屬性一樣，任何 CSS 漸層類型也都是有效的。

border-image-source

Browser Support

• 15
• 12
• 15
• 6

Source

圓錐漸層