圓錐漸層可用於製作有趣的效果,例如這款漂亮的邊框範例。
這個由 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
圓錐漸層