このページは Cloud Translation API によって翻訳されました。

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

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

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`

対応ブラウザ

ソース