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

如何设置百分比的边框粗细？ 边框不支持百分比…但仍有可能…

正如其他人指出的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'

正如你可以看到它说
百分比：N / A 。

非脚本解决方案

您可以使用包装器元素模拟百分比边界，您可以在其中进行以下 *** 作：

1. 将包装器元素设置

   background-color

   为所需的边框颜色
2. 设置包装元素的

   padding

   百分比（因为它们受支持）
3. 将您的元素设置

   background-color

   为白色（或任何需要的颜色）

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

示例中使用的HTML

.faux-borders {    background-color: #f00;    padding: 1px 25%; }.content {    background-color: #fff;}<div >    <div >        This is the element to have percentage borders.    </div></div>

问题：
您必须意识到，当您的元素具有某些复杂的背景时，这将变得更加复杂……尤其是如果该背景是从祖先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; }<div >    This is the element to have percentage borders.</div>

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

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