html边框粗细设置,如何设置百分比的边框粗细？

边框不支持百分比...但仍有可能...

正如其他人指出的CSS规范&＃xff0c;边框不支持百分比&＃xff1a;

&＃39;border-top-width&＃39;,

&＃39;border-right-width&＃39;,

&＃39;border-bottom-width&＃39;,

&＃39;border-left-width&＃39;

Value:          | inherit

Initial:        medium

Applies to:     all elements

Inherited:      no

Percentages:    N/A

Media:          visual

Computed value: absolute length; &＃39;0&＃39; if the border style is &＃39;none&＃39; or &＃39;hidden&＃39;

正如你可以看到它说百分比&＃xff1a;N / A。

非脚本解决方案

您可以使用包装器元素模拟百分比边界&＃xff0c;您可以在其中进行以下操作&＃xff1a;

将包装器元素设置background-color为所需的边框颜色

设置包装元素的padding百分比(因为它们受支持)

将您的元素设置background-color为白色(或任何需要的颜色)

这将以某种方式模拟您的百分比边界。这是使用此技术的具有25&＃xff05;宽度侧边框的元素的示例。

示例中使用的HTML

.faux-borders {

background-color: #f00;

padding: 1px 25%; /* set padding to simulate border */

}

.content {

background-color: #fff;

}

问题&＃xff1a;您必须意识到&＃xff0c;当您的元素具有某些复杂的背景时&＃xff0c;这将变得更加复杂……尤其是如果该背景是从祖先DOM层次结构继承而来的。但是&＃xff0c;如果您的用户界面足够简单&＃xff0c;则可以采用这种方式。

脚本解决方案

&＃64;BoltClock提到了脚本解决方案&＃xff0c;您可以在其中以编程方式根据元素大小计算边框宽度。

这是一个使用jQuery非常简单的脚本的示例。

var el &＃61; $(".content");

var w &＃61; el.width() / 4 | 0; // calculate & trim decimals

el.css("border-width", "1px " &＃43; w &＃43; "px");

.content { border: 1px solid #f00; }

但是您必须知道&＃xff0c;每次容器大小更改(即&＃xff0c;浏览器窗口调整大小)时&＃xff0c;都必须调整边框宽度。我使用wrapper元素的第一个解决方法似乎要简单得多&＃xff0c;因为它会在这些情况下自动调整宽度。

脚本解决方案的积极方面是&＃xff0c;它不会遇到我先前的非脚本解决方案中提到的背景问题。