円錐グラデーションを使用すると、この枠線の例のような興味深い効果を作成できます。
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 を作成しました。要素の上にマウスを移動すると、グラデーションが変化します。これは、回転角度を格納する CSS カスタム プロパティを JavaScript で更新することで行われます。
次の例では、border-image-source プロパティを使用しています。このプロパティでは、要素の枠線の作成に使用するソース画像を設定します。画像の値を受け取る他のプロパティと同様に、CSS の任意のグラデーション タイプも有効です。
border-image-source
円錐グラデーション