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

Question

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

border-width:10%;

但它不起作用.

我想border-width用百分比设置的原因是我有一个元素width: 80%;和height: 80%;,并且我希望元素覆盖整个浏览器窗口,所以我想将所有边框设置为10%.我没有使用两个元素方法,其中一个将位于另一个之后并充当边框,因为元素的背景是透明的,并且在其后面定位元素会影响它的透明度.

我知道这可以通过JavaScript完成,但我正在寻找一种只有CSS的方法,如果可能的话.

Answer 1

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

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

非脚本化解决方案

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

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>

但是你必须要知道,每次容器大小改变时你都必须调整边框宽度(即浏览器窗口调整大小).我的第一个使用包装元素的解决方法似乎更简单,因为它会在这些情况下自动调整宽度.

脚本解决方案的积极方面是它不会遇到我之前的非脚本化解决方案中提到的后台问题.

Answer 2

你也可以使用

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

要么

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

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

例子：

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