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

雨点打透心脏的1/2处 2022-10-09 02:36 177阅读 0赞

![8e3a6a2b34ea592305be83e1b92045f8.png][]

郎朗坤

边框不支持百分比...但仍有可能...正如其他人指出的CSS规范，边框不支持百分比：'border-top-width','border-right-width','border-bottom-width','border-left-width' Value: | 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'正如你可以看到它说百分比：N / A。非脚本解决方案您可以使用包装器元素模拟百分比边界，您可以在其中进行以下操作：将包装器元素设置background-color为所需的边框颜色设置包装元素的padding百分比(因为它们受支持)将您的元素设置background-color为白色(或任何需要的颜色)这将以某种方式模拟您的百分比边界。这是使用此技术的具有25％宽度侧边框的元素的示例。示例中使用的HTML.faux-borders \{ background-color: \#f00; padding: 1px 25%; /\* set padding to simulate border \*/\}.content \{ background-color: \#fff;\}

This is the element to have percentage borders.

问题：您必须意识到，当您的元素具有某些复杂的背景时，这将变得更加复杂……尤其是如果该背景是从祖先DOM层次结构继承而来的。但是，如果您的用户界面足够简单，则可以采用这种方式。脚本解决方案@BoltClock提到了脚本解决方案，您可以在其中以编程方式根据元素大小计算边框宽度。这是一个使用jQuery非常简单的脚本的示例。var el = $(".content");var w = el.width() / 4 | 0; // calculate & trim decimalsel.css("border-width", "1px " + w + "px");.content \{ border: 1px solid \#f00; \}

This is the element to have percentage borders.

但是您必须知道，每次容器大小更改(即，浏览器窗口调整大小)时，都必须调整边框宽度。我使用wrapper元素的第一个解决方法似乎要简单得多，因为它会在这些情况下自动调整宽度。脚本解决方案的积极方面是，它不会遇到我先前的非脚本解决方案中提到的背景问题。

[8e3a6a2b34ea592305be83e1b92045f8.png]: /images/20221005/2eb326e034c843da9c07ce89ec3cda16.png