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

您可以使用圓錐梯度來創造一些有趣的特效，例如這個精美的邊框範例。

這個由 Adam Argyle 建立的 CodePen，最初透過 Twitter 的 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。只要將滑鼠遊標移到元素上，您就會看到漸層變化，因為需要稍微更新儲存旋轉角度的 CSS 自訂屬性。

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

border-image-source

瀏覽器支援

• 15
• 12
• 15
• 6

資料來源

錐形漸層

瀏覽器支援

• 69
• 79
• 83
• 12.1

資料來源