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

Question

如何以百分比设置元素的边框宽度？我尝试了语法

border-width:10%;

但它不起作用。

我想以百分比设置 border-width 的原因是我有一个元素 width: 80%; 和 height: 80%;，我希望元素覆盖整个浏览器窗口，所以我想将所有边框设置为 10%。我没有使用双元素方法来执行此操作，在该方法中，一个元素位于另一个元素的后面并充当边框，因为元素的背景是透明的，将元素放在其后面会影响它的透明度。

我知道这可以通过 JavaScript 完成，但我正在寻找一种纯 CSS 方法，如果可能的话。

Answer 1

边框不支持百分比...但还是可以的...

正如其他人指出的那样 CSS specification , 边框不支持百分比:

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

尽你所能 see它说 Percentages: N/A。

非脚本解决方案

您可以使用包装器元素模拟您的百分比边框，您可以:

1. 将包装器元素的 background-color 设置为您想要的边框颜色
2. 以百分比设置包装元素的padding(因为它们受支持)
3. 将元素 background-color 设置为白色(或任何需要的颜色)

这会以某种方式模拟您的百分比边界。 Here's an example使用此技术的具有 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 层次结构继承的。但如果您的 UI 足够简单，您可以这样做。

脚本化解决方案

@BoltClock mentioned scripted solution您可以在其中根据元素大小以编程方式计算边框宽度。

This is such an example使用 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>

但您必须知道，每次您的容器大小发生变化(即浏览器窗口大小调整)时，您都必须调整边框宽度。我对包装元素的第一个解决方法似乎简单得多，因为它会在这些情况下自动调整宽度。

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