CSS を使用して複数色の枠線を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS を使用して複数色の枠線を作成するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-01 02:34:09

オリジナル

380 人が閲覧しました

How Can I Create Multi-Colored Borders Using CSS?

複数色の枠線: CSS ソリューション

複数の色で枠線を作成すると、Web 要素の視覚的な魅力を高めることができます。この効果を実現する 1 つの方法は疑似要素を使用することですが、より簡単なアプローチには、border-image プロパティが含まれます。

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;
}

ログイン後にコピー

内element:

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

ログイン後にコピー

このコードは、複数色の上枠を持つ 150 ピクセル x 150 ピクセルのボックスを作成します。線形グラデーションは、境界線に使用される色の順序を定義します: 灰色 (25%)、黄色 (25%)、黄色 (50%)、赤 (50%)、赤 (75%)、青緑 (75%)。 border-image プロパティの末尾の 5 は、境界線の幅をピクセル単位で指定します。

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