您可以使用圓錐梯度來創造一些有趣的特效,例如這個精美的邊框範例。
這個由 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
錐形漸層