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

円錐グラデーションを使用すると、この適切な枠線の例のような、興味深い効果を作成できます。

この CodePen は Adam が作成したものです。 Argyle に共有 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 フォーク この Codepen は Adam の CodePen。メッセージにカーソルを合わせて グラデーションが変化します 回転角度を格納する CSS カスタム プロパティを更新する

これらの例では、 border-image-source プロパティです。このプロパティは、要素の作成に使用するソース画像を設定します。 クリックします。画像の値を受け入れる他のプロパティと同様に、CSS グラデーションは タイプも有効です。

border-image-source

対応ブラウザ

  • Chrome: 15。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 15. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

ソース

円錐グラデーション

対応ブラウザ

  • Chrome: 69。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 83。 <ph type="x-smartling-placeholder">
  • Safari: 12.1。 <ph type="x-smartling-placeholder">

ソース