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

CSS の部分的なボックスの境界線

CSS では、境界線が部分的にのみ広がるボックスを作成することは直接できません。箱。ただし、賢い回避策を使用すると、同様の効果を実現できます。

部分境界線の作成

この手法には、必要な寸法と背景色を使用してコンテナ div を作成することが含まれます。この div 内に、:after セレクターを使用して小さな疑似要素が配置されます。この疑似要素は部分的な境界線を表し、それに応じて位置とサイズが設定されます。

たとえば、下部に幅 60 ピクセルの境界線を持つ幅 350 ピクセルのボックスを作成するには、次の CSS を使用できます:

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

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

このアプローチでは、境界線のサイズ、位置、色の点で柔軟性が得られます。また、疑似要素がブラウザーでサポートされていない場合でも、部分的な境界線のない単純なボックスが表示され、適切な機能低下が保証されます。

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