css – 如何设置边框的厚度百分比？

如何以百分比形式设置元素的border-width？我试过语法

border-width:10%;

但它不工作。

编辑：

我想要设置border-width百分比的原因是因为我有一个宽度为80％的元素;和height：80％;，我想让元素覆盖整个浏览器窗口，所以我想设置所有边框10％。我不是用两个元素方法，其中一个将定位在另一个之后，并作为边界，因为元素的背景是透明的，并在其后面定位一个元素会影响其透明度。

我知道这可以通过JavaScript，但我正在寻找一个CSS只有方法，如果可能的话。

解决方法

边框不支持百分比…但它仍然可能…

由于其他人已指向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它说百分比：N / A。

非脚本解决方案

您可以使用包装元素模拟百分比边框，其中：

>将包装元素的背景颜色设置为所需的边框颜色
>设置包装元素的填充百分比(因为它们是支持的)
>将您的元素背景颜色设置为白色(或任何需要的)

这将以某种方式模拟你的百分比边界。 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>

但你必须知道，你将不得不每次你的容器大小改变(即浏览器窗口调整大小)调整边框宽度。我的第一个解决方法与wrapper元素似乎更简单，因为它会在这些情况下自动调整宽度。

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

原文地址：https://www.jb51.cc/css/222898.html

css – 如何设置边框的厚度百分比？

解决方法

相关推荐