CSSの枠線をパーセンテージで指定できますか?

CSS 境界線の太さ (パーセンテージ): 可能ですか?

質問:

境界線のある要素を作成しようとしているときブラウザ ウィンドウの指定された割合をカバーする場合、border-width:10%; を使用しようとしましたが、失敗しました。 CSS でパーセンテージを使用して境界線の太さを設定する方法はありますか?

答え:

境界線はパーセンテージをサポートしていません...しかし、それでも可能です。 ..

CSS 仕様によると、境界線ではパーセンテージはサポートされていませんwidths:

border-width

Value

Percentages

境界線-トップ幅

`

継承`

border-width	Value	Percentages
border-top-width	`	inherit`	N/A

該当なし

スクリプトなし解決策:

CSS の境界線はパーセンテージをサポートしていないため、境界線をシミュレートするためにラッパー要素の使用を検討してください:

1. ラッパーの背景色を希望の境界線の色に設定します。
2. border-width の代わりに、ラッパー要素のパーセンテージでパディングを使用します。
3. Set要素の背景色を希望のコンテンツの色に変更します。

この手法は、パディングを使用してパーセンテージ境界線をシミュレートします。

例:

作成するにはこれを使用した25%幅のサイドボーダーアプローチ:

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の枠線をパーセンテージで指定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。