CSS を使用してボックスの部分的な境界線を作成するにはどうすればよいですか?

CSS でボックスの部分的な境界線を作成する

CSS では、特定のサイズまたは部分的にカバーされるボックスの境界線を直接宣言することはできません。ただし、この効果を効果的に再現する別のアプローチがあります。

解決策:

ボックスに通常の CSS 境界線を作成し、CSS で配置された子要素を追加します。をクリックして境界線を希望の長さまで延長します。以下に例を示します。

.box {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
  border: 1px solid black;
}

.box:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

HTML:

<div class="box"></div>

このコードは、通常の黒い境界線を持つボックスと、追加の 60 ピクセルの長さの灰色のバーを作成します。下部は部分的な境界線を効果的にシミュレートします。この手法は、CSS の位​​置決めをサポートしていない古いブラウザでは正常に機能しません。

以上がCSS を使用してボックスの部分的な境界線を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。