如何在 CSS 中创建基于百分比的边框？

如何以百分比设置边框粗细？

CSS 不直接支持使用百分比设置边框宽度。但是，您可以结合使用 CSS 技术来模拟此行为。

您可以将要添加边框的元素包装在包装器中具有以下属性的元素：

• 设置将包装元素的背景颜色设置为所需的边框颜色。


• 以百分比形式设置包装元素的内边距以模拟边框宽度。


• 设置内部元素的背景颜色为所需的颜色边框。

此技术通过使用填充和背景颜色创建边框百分比的错觉。

示例代码

<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.

登录后复制