錐形漸層可用來產生一些有趣的效果,例如這個不錯的邊框例子。
此 CodePen 是由 Adam 建立的 Argyle 最初透過以下方式分享: Twitter 上的 Tweet, 示範如何使用 Conic 梯度 建立邊框。
.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:將滑鼠移至 這樣就會看到漸層變化 更新儲存旋轉角度的 CSS 自訂屬性。
這些範例使用
border-image-source
敬上
資源。這個屬性會設定用來建立元素的
邊框。和其他接受圖片值的屬性一樣,任何 CSS 漸層色
類型也有效。
border-image-source
錐形漸層