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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

border-width:10%;

但这是行不通的。

我要设置border-width百分比的原因是我有一个width: 80%;和元素height:

80%;，并且希望该元素覆盖整个浏览器窗口，因此我想将所有边框设置为10％。我不是使用两个元素方法来执行此操作的，因为一个元素将放置在另一个元素的后面并充当边框，因为该元素的背景是透明的，而将元素放置在它的后面会影响其透明度。

我知道这可以通过JavaScript来完成，但是如果有可能，我正在寻找仅CSS方法。

回答：

回答：

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

正如你可以看到它说

。

回答：

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

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

  2. 设置包装元素的padding百分比（因为它们受支持）

  3. 将您的元素设置background-color为白色（或任何需要的颜色）

这将以某种方式模拟您的百分比边界。这是使用此技术的具有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层次结构继承而来的。但是，如果您的用户界面足够简单，则可以采用这种方式。

回答：

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

这是一个使用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元素的第一个解决方法似乎要简单得多，因为它会在这些情况下自动调整宽度。 *

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

以上是 如何设置百分比的边框粗细？ 的全部内容， 来源链接： utcz.com/qa/420148.html

回到顶部