CSS のみを使用してパーセンテージベースの CSS 境界線を作成するにはどうすればよいですか?

CSS ボーダー: パーセンテージでの太さの設定: CSS のみのアプローチ

CSS ボーダーはネイティブにパーセンテージをサポートしていませんが、これを達成するための賢い CSS のみのソリューションがあります。この効果。

ラッパー要素マジック

パーセンテージをシミュレートするには境界線の場合は、次のプロパティを持つラッパー要素を使用します:

1. 背景色: ラッパー要素の背景色を希望の境界線の色に設定します。
2. Padding: ラッパー要素のパディングをパーセンテージで設定して境界線の幅を作成しますillusion.
3. 要素の背景色: ラッパー内の要素の背景色を目的の色 (透明またはその他) に設定します。

コード例:

例として、横幅 25% の要素を作成する HTML および CSS コードを示します。 "borders":

HTML:

<div class="faux-borders">
    <div class="content">
        This is the element to have percentage borders.
    </div>
</div>

CSS:

.faux-borders {
    background-color: #f00;
    padding: 1px 25%; /* set padding to simulate border */
}
.content {
    background-color: #fff;
}

この手法は、パーセント境界線を模倣します。ラッパー要素のパディングを使用して錯覚を作成します。

以上がCSS のみを使用してパーセンテージベースの CSS 境界線を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。