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它表示百分比：N / A 。

非脚本化解决方案

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

将包装器元素的background-color设置为所需的边框颜色
以百分比形式设置包装元素的padding（因为它们受支持）
将您的元素background-color设置为白色（或任何需要的颜色）

这会以某种方式模拟您的百分比边界。 Here's an example使用此技术的边长为25％的边框的元素。{/ p>

示例中使用的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>

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

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

Answer 2

您也可以使用

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

OR

border: 9vw solid #F5E5D6;

Answer 3

所以这是一个较老的问题，但对于那些仍在寻找答案的人来说，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/

Answer 4

百分比值不适用于CSS中的border-width。这列在spec。

中

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

Answer 5

您可以使用em代替百分比而不是像素，

示例：

border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */

Answer 6

，它是窗口视口的百分比。

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

border: 5vw solid red;

尝试Modern browsers support vh and vw units并更改窗口宽度;当窗口改变大小时，边框将改变厚度。 box-sizing: border-box;也可能有用。

Answer 7

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

Answer 8

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

创建一个span

<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%和{{ 1}}。添加其他必要的内容：

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%;（因为mdiv的宽度等于mheader的宽度为100 ％，宽度将是您设置的宽度的100％。如果将宽度设置为1％，边框将是窗口宽度的1％。将与width:1%;对应的ID设置为class="HorizontalBorder"（因为它在标题容器中，顶部是指根据标题位于其中的位置。此+高度应加起来如果你希望它到达底部，则为{100}，top:99%和left:0%;（因为mdiv的高度是mheader高度的5倍[100％= 100,20％= 20， 100/20 = 5]，高度将是你设置的20％。如果你将高度设置为1％，边框将是窗口高度的.2％。以下是它的外观：

height:1%

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

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

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

Answer 9

看看calc() specification。以下是一个使用示例：

border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);

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

9 个答案:

边境不支持百分比......但它仍然可能......

非脚本化解决方案

脚本解决方案