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

圓錐漸層可用於製作有趣的效果,例如這款漂亮的邊框範例。

這個由 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

瀏覽器支援

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

資料來源

圓錐漸層