如何在 CSS 中建立基於百分比的邊框？

如何以百分比設定邊框粗細？

CSS 不直接支援使用百分比設定邊框寬度。但是，您可以結合使用 CSS 技術來模擬此行為。

您可以將要添加邊框的元素包裝在包裝器中具有以下屬性的元素：

• 設定將包裝元素的背景顏色設定為所需的邊框顏色。


• 以百分比形式設定包裝元素的內邊距以模擬邊框寬度。


• 設定內部元素的背景顏色為所需的顏色邊框。

此技術透過使用填充和背景顏色來創建邊框百分比的錯覺。

範例程式碼

<br>.faux-borders {<br>背景顏色：#f00;<br>填滿： 1px 25%; /<em> 模擬兩側25% 邊框</em>/<br>}<p>.content {<br> 背景顏色: #fff;<br>}</p><p>&lt ;div> </p><div class="content">
<pre class="brush:php;toolbar:false">This element has simulated percentage borders.