CSS で「border-image」のみを使用して複数色の境界線を作成するにはどうすればよいですか?

CSS を使用した複数色の境界線の作成

質問で提供されている画像は、複数の色の境界線を示しています。この境界線は、疑似要素を使用せずに、線形グラデーションとともに border-image プロパティを使用することによって作成できます。これを実現する方法は次のとおりです。

コードの実装

.fancy-border {
  width: 150px;
  height: 150px;
  text-align: center;
  border-top: 5px solid;
  border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%, red 50%, red 75%, teal 75%) 5;
}

<div class="fancy-border">
  my content
</div>

説明

上記のコード スニペット内:

• 幅、高さ、 text-align プロパティは、div 要素のサイズと配置を構成します。
• border-top プロパティは、div の上の境界線を定義します。
• border-image プロパティは、多色の境界線。これは、境界線の幅全体にわたる線形グラデーションを参照します。色はグレー、黄色、赤、青緑の間で交互になります。
• border-image プロパティの末尾の 5 は、グラデーションの幅を表します。ピクセル。

以上がCSS で「border-image」のみを使用して複数色の境界線を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。