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

Question 1

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

border-width:10%;

但这是行不通的。

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

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

Question 2

边框不支持百分比...但仍有可能...

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

正如你可以看到它说百分比：N / A。

非脚本解决方案

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

将包装器元素设置background-color为所需的边框颜色
设置包装元素的padding百分比（因为它们受支持）
将您的元素设置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元素的第一个解决方法似乎要简单得多，因为它会在这些情况下自动调整宽度。

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

Question 3

您也可以使用

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

要么

border: 9vw solid #F5E5D6;

Question 4

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

Question 5

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

您将需要使用JavaScript来计算元素宽度的百分比或所需的任何长度数量，然后将结果应用于px元素边界或与之相似。

Question 6

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

例：

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

Question 7

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

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

border: 5vw solid red;

试试这个例子，改变窗口的宽度。边框会随着窗口大小的变化而改变厚度。box-sizing: border-box;可能也有用。

Question 8

框大小
设置将框大小box-sizing: border-box;设置为边框，然后将宽度设置为100％，并为边框设置固定宽度，然后添加最小宽度，这样对于小屏幕而言，边框不会超过整个屏幕

Question 9

您可以使用跨度制作自定义边框。用一个类（指定边框的行进方向）和一个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的宽度等于100％的mheader的宽度，宽度将是你将它设置为100％。如果将宽度设置为1％边框将是窗口宽度的1％）。设置ID对应于class="HorizontalBorder"到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中消失，但是如果您将其启动到浏览器中则不会。

Question 10

看一下calc（）规范。这是用法示例：

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