正如其他人指出的CSS规范，边框不支持百分比：
'border-top-width',
'border-right-width',
'border-bottom-width',
'border-left-width'
Value: <border-width> | inherit
Initial: medium
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: absolute length; '0' if the border style is 'none' or 'hidden'
正如你可以看到它说 。
您可以使用包装器元素模拟百分比边界，您可以在其中进行以下操作：
这将以某种方式模拟您的百分比边界。这是使用此技术的具有25％宽度侧 边框 的元素的示例。
示例中使用的HTML
.faux-borders {
background-color: #f00;
padding: 1px 25%; /* set padding to simulate border */
}
.content {
background-color: #fff;
}
<div class="faux-borders">
<div class="content">
This is the element to have percentage borders.
</div>
</div>
您必须意识到，当您的元素具有某些复杂的背景时，这将变得更加复杂……尤其是如果该背景是从祖先DOM层次结构继承而来的。但是，如果您的用户界面足够简单，则可以采用这种方式。
@BoltClock提到了脚本解决方案，您可以在其中以编程方式根据元素大小计算边框宽度。
这是一个使用jQuery非常简单的脚本的示例。
var el = $(".content");
var w = el.width() / 4 | 0; // calculate & trim decimals
el.css("border-width", "1px " + w + "px");
.content { border: 1px solid #f00; }
<div class="content">
This is the element to have percentage borders.
</div>
但是您必须知道，每次 *
602392714
清零编程群