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

境界線の太さをパーセンテージで設定する方法

パーセンテージを使用した境界線の幅の設定は、CSS では直接サポートされていません。 。ただし、CSS テクニックを組み合わせてこの動作をシミュレートできます。

境界線を追加したい要素をラッパーでラップすることができます。次のプロパティを持つ要素:

• ラッパー要素の背景色を目的の境界線の色に設定します。


• ラッパー要素のパディングをパーセンテージで設定して、境界線の幅をシミュレートします。


• 内部要素の背景色を、 border.

このテクニックは、パディングと背景色を使用して、境界線の割合を錯覚させます。

例コード

<br>.faux-borders {<br> 背景色: #f00;<br> パディング: 1px 25%; /<em> 側面に 25% の境界線をシミュレートします </em>/<br>}</p>
<p>.content {<br> 背景色: #fff;<br>}</p>
<p>&lt ;div> </p>
<div class="content">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">This element has simulated percentage borders.

ログイン後にコピー