円錐形のグラデーションを使用しておしゃれな枠線を付ける

円錐状のグラデーションを使用すると、この美しいボーダーの例のような興味深い効果を作成できます。

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

対応ブラウザ

  • Chrome: 15.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 6.

ソース

円錐形グラデーション