CSSを使用してグラデーションの境界線を作成するにはどうすればよいですか? 5つの共有方法

CSS を使用してグラデーションの境界線を作成するにはどうすればよいですか?次の記事では、CSS を使用してグラデーション境界線を実装する 5 つの方法を紹介します。

境界線にグラデーション カラーを設定することは非常に一般的な効果です。この効果を実現するには多くのアイデアがあります。今日は参考のために私が知っている方法をリストします。 。 (学習ビデオ共有: css ビデオ チュートリアル 、Web フロントエンド )

1. border-image

を使用します。提供される CSS border-image 属性は、境界線の複雑なパターンを描画するために使用されます。background-image と同様に、image と linear を表示できます- グラデーション。

border-image を使用してグラデーション カラー境界線を設定するのは最も簡単な方法で、必要なコードは 2 行だけです:

CSS:

div {
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}

/* 或者 */
div {
  border: 4px solid;
  border-image-source: linear-gradient(to right, #8f41e9, #578aef);
  border-image-slice: 1;
}

Codepen デモ

https://codepen.io/mudontire/pen/xxLxeZw

この方法は単純ですが、明らかな欠陥があり、はサポートされていません。border-radius を設定してください。次に、border-radius をサポートするためのいくつかの方法を紹介します。

2. background-image

を使用する background-image を使用して、グラデーションの背景を描画し、中央を背景で覆うのが最も簡単です。単色 思いつく方法の 1 つは、2 つのボックスを重ねて使用し、下のボックスにグラデーションの背景とパディングを設定し、上のボックスに単色の背景を設定することです。

HTML:

<div class="border-box border-bg">
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione
    necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus
    voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  width: 300px;
  height: 200px;
  margin: 25px 0;
}

.border-bg {
  padding: 4px;
  background: linear-gradient(to right, #8f41e9, #578aef);
  border-radius: 16px;
}

.content {
  height: 100%;
  background: #222;
  border-radius: 13px; /*trciky part*/
}

コードペンのデモ

https:/ /codepen.io/mudontire/pen/ZEJEZoY

この方法の利点は理解しやすく互換性が高いことですが、欠点はコンテンツの border-radius# を設定することです。 ## は扱いが難しく、不正確になります。

3. 2 層要素、

background-image、background-clip

border-radius## を解決するには方法 2 では # 不正確な場合は、別の要素を下のレイヤーのグラデーションの背景として使用し、上のレイヤーに透明な境界線と単色の背景を設定できます (隠蔽を避けるために、background-clip:padding-box を設定する必要があります)下の要素の境界線)、上下のレイヤーで同じ border-radius を設定します。

HTML:

<div class="border-box">
  <div class=&#39;border-bg&#39;></div>
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
    saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  position: relative;
  background-color: #222;
  background-clip: padding-box; /*important*/
}

.border-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  margin: -4px;
  border-radius: inherit; /*important*/ 
  background: linear-gradient(to right, #8f41e9, #578aef);
}

コードペンのデモ

https:/ /codepen.io/mudontire/pen/yLoLrxL

4. 疑似要素、メソッドの簡略化 3

疑似要素を使用して

div.border-bg# を置き換えることができます# # HTML 構造を簡素化するため。

HTML:

<div class="border-box">
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
    saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  position: relative;
  background-color: #222;
  background-clip: padding-box; /*important*/
}

.border-box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  margin: -4px;
  border-radius: inherit; /*important*/
  background: linear-gradient(to right, #8F41E9, #578AEF);
}

コードペンのデモ

https:/ /codepen.io/mudontire/pen/JjyjVwN

5. 単一レイヤー要素、

background-clip

、

background-origin、background - image最後に、最もエレガントな方法は、単一レイヤー要素を使用して、background-clip

と

background-origin# をそれぞれ設定することだと思います。 ## , background-image これら 3 つの属性のそれぞれは、2 つの値のセットを設定します。最初のセットは境界線のモノクロ背景の設定に使用され、2 番目のセットは境界線のグラデーション カラーの設定に使用されます。 HTML:

<div class="border-box">
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
    saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}

コードペンのデモ

https:/ /codepen.io/mudontire/pen/wvqvZZO

現時点で思いつくのはこの 5 つの方法です。個人的には、最初に 4 と 5 を使用することをお勧めします。他にもっと良い方法がある場合は、追加してください。 。

プログラミング関連の知識について詳しくは、

プログラミング入門

をご覧ください。 ！

以上がCSSを使用してグラデーションの境界線を作成するにはどうすればよいですか? 5つの共有方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。