CSSを使用してグラデーションの境界線を作成するにはどうすればよいですか? 5つの共有方法-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2022-05-18 10:01:04

転載

10090 人が閲覧しました

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

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: &#39;&#39;;
  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