96

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

border-width:10%;

但它不起作用。

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

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

4

9 回答 9

88

边框不支持百分比...但仍然可以...

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

如您所见，它显示Percentages: N/A。

非脚本解决方案

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

  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 层次结构继承的。但是如果你的 UI 足够简单，你可以这样做。

脚本解决方案

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

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

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

于 2012-11-20T14:15:18.387 回答
41

你也可以使用

border-left: 9vw solid #F5E5D6;
border-right: 9vw solid #F5E5D6;

或者

border: 9vw solid #F5E5D6;
于 2016-04-14T11:22:20.517 回答
25

所以这是一个较老的问题，但对于那些仍在寻找答案的人来说，CSS 属性 Box-Sizing 在这里是无价的：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit  */
-moz-box-sizing: border-box;    /* Firefox, other Gecko         */
box-sizing: border-box;

这意味着您可以将 div 的宽度设置为百分比，并且您添加到 div 的任何边框都将包含在该百分比内。因此，例如，以下代码会将 1px 边框添加到 div 宽度的内侧：

div { box-sizing:border-box; width:50%; border-right:1px solid #000; }

如果您想了解更多信息：http ://css-tricks.com/box-sizing/

于 2014-05-27T02:02:50.227 回答
5

您可以将 em 用于百分比而不是像素，

例子：

border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */
于 2015-11-16T18:23:51.617 回答
4

百分比值不适用于border-widthCSS。这在规范中列出。

您将需要使用 JavaScript 来计算元素宽度的百分比或您需要的任何长度数量，并将结果应用到px或类似于元素的边框。

于 2012-11-20T13:56:41.047 回答
4

现代浏览器支持 vh 和 vw 单位，它们是窗口视口的百分比。

因此，您可以将纯 CSS 边框作为窗口大小的百分比：

border: 5vw solid red;

试试这个例子并改变窗口宽度；边框将随着窗口大小的改变而改变粗细。box-sizing: border-box;也可能有用。

于 2016-03-07T05:53:35.303 回答
2

Box Sizing
将框大小设置为边框框box-sizing: border-box;并将宽度设置为 100% 并为边框设置固定宽度，然后添加最小宽度，以便对于小屏幕边框不会超过整个屏幕

于 2015-08-11T12:36:48.273 回答
0

您可以使用跨度制作自定义边框。用一个类（指定边界的方向）和一个 id 创建一个跨度：

<html>
    <body>
        <div class="mdiv">
            <span class="VerticalBorder" id="Span1"></span>
            <header class="mheader">
                <span class="HorizontalBorder" id="Span2"></span>
            </header>
        </div>
    </body>
</html>

然后，转到您的 CSS 并将类设置为position:absolute、height:100%（对于垂直边框）、width:100%（对于水平边框）margin:0%和background-color:#000000;。添加其他必要的内容：

body{
    margin:0%;
}

div.mdiv{
    position:absolute;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    margin:0%;
}

header.mheader{
    position:absolute;
    width:100%;
    height:20%; /* You can set this to whatever. I will use 20 for easier calculations. You don't need a header. I'm using it to show you the difference. */
    top:0%;
    left:0%;
    margin:0%;
}

span.HorizontalBorder{
    position:absolute;
    width:100%;
    margin:0%;
    background-color:#000000;
}

span.VerticalBorder{
    position:absolute;
    height:100%;
    margin:0%;
    background-color:#000000;
}

然后设置对应的id class="VerticalBorder"，，，top:0%;（left:0%;由于width:1%;mdiv的宽度等于mheader的宽度为100%，所以宽度将是你设置的100%。如果你把宽度设置为1%边框将是窗口宽度的 1%）。class="HorizontalBorder"设置与to对应的 id top:99%（因为它在标题容器中，所以顶部是指根据标题它所处的位置。如果你希望它到达底部，这个 + 高度应该加起来为 100%），left:0%;并且height:1%（由于 mdiv 的高度是 mheader 高度的 5 倍 [100% = 100, 20% = 20, 100/20 = 5]，因此高度将是您设置的高度的 20%。如果您设置高度到 1%，边框将是窗口高度的 0.2%）。这是它的外观：

span#Span1{
    top:0%;
    left:0%;
    width:.4%;
}
span#Span2{
    top:99%;
    left:0%;
    width:1%;
}

免责声明：如果您将窗口调整到足够小的尺寸，边框将消失。如果窗口被调整到某个点，一个解决方案是限制边框的大小。这是我所做的：

window.addEventListener("load", Loaded);

function Loaded() {
  window.addEventListener("resize", Resized);

  function Resized() {
    var WindowWidth = window.innerWidth;
    var WindowHeight = window.innerHeight;
    var Span1 = document.getElementById("Span1");
    var Span2 = document.getElementById("Span2");
    if (WindowWidth <= 800) {
      Span1.style.width = .4;
    }
    if (WindowHeight <= 600) {
      Span2.style.height = 1;
    }
  }
}

如果你做的一切正确，它应该看起来像这个链接中的样子：https://jsfiddle.net/umhgkvq8/12/ 出于某种奇怪的原因，边框会在 jsfiddle 中消失，但如果你将它启动到浏览器则不会.

于 2017-02-16T15:49:09.737 回答
-2

看看calc() 规范。这是一个使用示例：

border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);
于 2018-03-21T13:01:57.550 回答