含まれる Div の幅より小さい CSS 境界線を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

含まれる Div の幅より小さい CSS 境界線を作成するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-12 11:52:10

オリジナル

115 人が閲覧しました

How Can I Create a CSS Border Smaller Than Its Containing Div's Width?

Div 幅より小さい境界線の作成

CSS では、通常、境界線の幅は要素の幅によって決まります。取り囲む。境界線をそのコンテナ要素の幅よりも小さくしたい場合は、擬似要素を使用できます。方法は次のとおりです:

幅: 200px;<br> 高さ: 50px;   <br> 位置: 相対;<br> z-index: 1;<br> 背景: #eee;<br>}</p><p>div:before {<br> コンテンツ: "";<br> 位置: 絶対;<br> 左: 0;<br> 下: 0;<br> 高さ: 1px;<br> 幅: 50%;  /<em> または 100px </em>/<br> border-bottom: 1px ソリッド マゼンタ;<br>}

<div>Item 2</div>

この例では、:before 疑似要素を使用して、幅の半分だけの境界線を作成します。コンテナ部門これを行うには、:before 要素の width プロパティを 50% または目的の幅 (例: 100px) に設定します。また、position:Absolute プロパティを使用して、:before 要素をコンテナ div 内に絶対的に配置します。

z-index プロパティにより、:before 要素がコンテナ div のコンテンツの上に配置されるようになります。これにより、境界線がコンテンツの背後に隠れることを防ぎます。

疑似要素を使用すると、コンテナ要素とは異なる幅と位置を持つ境界線を作成できます。この柔軟性により、カスタムの視覚効果を作成し、Web ページのデザインを強化することができます。

以上が含まれる Div の幅より小さい CSS 境界線を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。