CSS 如何以百分比设置边框的厚度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13474754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set border's thickness in percentages?
提问by Peeyush Kushwaha
How to set border-width of an element in percentages? I tried the syntax
如何以百分比设置元素的边框宽度？我尝试了语法
border-width:10%;
But it doesn't work.
但它不起作用。
The reason I want to set border-widthin percentages is I have an element with width: 80%;and height: 80%;, and I want the element to cover the whole browser window, so I want to set all borders 10%. I am not doing this with the two elements method, in which one would be positioned behind the other and act as the border, because the element's background is transparent, and positioning an element behind it would affect it's transparency.
我想设置border-width百分比的原因是我有一个带有width: 80%;and的元素height: 80%;，我希望该元素覆盖整个浏览器窗口，所以我想将所有边框设置为 10%。我不是用两个元素方法来做这个的，其中一个元素将被放置在另一个元素的后面并充当边框，因为元素的背景是透明的，将元素放置在它后面会影响它的透明度。
I know this can be done via JavaScript, but I am looking for an CSS only method, if possible at all.
我知道这可以通过 JavaScript 完成，但如果可能的话，我正在寻找一种仅使用 CSS 的方法。
采纳答案by Robert Koritnik
Border doesn't support percentage... but it's still possible...
Border 不支持百分比......但它仍然有可能......
As others have pointed to CSS specification, percentages aren't supported on borders:
正如其他人指出的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'
As you can seeit says Percentages: N/A.
如您所见，它说Percentages: N/A。
Non-scripted solution
非脚本化解决方案
You can simulate your percentage borders with a wrapper element where you would:
您可以使用包装元素模拟您的百分比边框，您可以：
- set wrapper element's
background-colorto your desired border colour - set wrapper element's
paddingin percentages (because they're supported) - set your elements
background-colorto white (or whatever it needs to be)
- 将包装元素设置
background-color为您想要的边框颜色 padding以百分比设置包装元素（因为它们受支持）- 将您的元素设置
background-color为白色（或任何需要的元素）
This would somehow simulate your percentage borders. Here's an exampleof an element with 25% width side bordersthat uses this technique.
这会以某种方式模拟您的百分比边界。下面是使用此技术的具有 25% 宽度侧边框的元素的示例。
HTML used in the example
示例中使用的 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>Issue:You have to be aware that this will be much more complicated when your element has some complex background applied to it... Especially if that background is inherited from ancestor DOM hierarchy. But if your UI is simple enough, you can do it this way.
问题：您必须意识到，当您的元素应用了一些复杂的背景时，这将变得更加复杂……特别是如果该背景是从祖先 DOM 层次结构继承的。但是如果你的 UI 足够简单，你可以这样做。
Scripted solution
脚本化解决方案
@BoltClock mentioned scripted solutionwhere you can programmaticaly calculate border width according to element size.
@BoltClock 提到了脚本解决方案，您可以在其中根据元素大小以编程方式计算边框宽度。
This is such an examplewith extremely simple script using 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>But you have to be aware that you will have to adjustborder width every time your container size changes(i.e. browser window resize). My first workaround with wrapper element seems much simpler because it will automatically adjust width in these situations.
但是您必须注意，每次容器大小更改（即调整浏览器窗口大小）时，您都必须调整边框宽度。我使用包装器元素的第一个解决方法似乎要简单得多，因为它会在这些情况下自动调整宽度。
The positive side of scripted solution is that it doesn't suffer from background problems mentioned in my previous non-scripted solution.
脚本化解决方案的积极方面是它不会受到我之前的非脚本化解决方案中提到的背景问题的影响。
回答by Ajmal Jamil
You can also use
你也可以使用
border-left: 9vw solid #F5E5D6;
border-right: 9vw solid #F5E5D6;
OR
或者
border: 9vw solid #F5E5D6;
回答by Kimberly Fox
So this is an older question, but for those still looking for an answer, the CSS property Box-Sizing is priceless here:
所以这是一个较旧的问题，但对于那些仍在寻找答案的人来说，CSS 属性 Box-Sizing 在这里是无价的：
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
It means that you can set the width of the Div to a percentage, and any border you add to the div will be included within that percentage. So, for example, the following would add the 1px border to the inside of the width of the div:
这意味着您可以将 Div 的宽度设置为一个百分比，并且您添加到 div 的任何边框都将包含在该百分比内。因此，例如，以下内容会将 1px 边框添加到 div 宽度的内部：
div { box-sizing:border-box; width:50%; border-right:1px solid #000; }
If you'd like more info: http://css-tricks.com/box-sizing/
如果您想了解更多信息：http: //css-tricks.com/box-sizing/
回答by BoltClock
Percentage values are not applicable to border-widthin CSS. This is listed in the spec.
百分比值不适用于border-widthCSS。这在规范中列出。
You will need to use JavaScript to calculate the percentage of the element's width or whatever length quantity you need, and apply the result in pxor similar to the element's borders.
您将需要使用 JavaScript 来计算元素宽度的百分比或您需要的任何长度数量，并将结果应用于px或类似于元素的边框。
回答by sbutterworth
You can use em for percentage instead of pixels,
您可以使用 em 作为百分比而不是像素，
Example:
例子：
border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */
回答by robocat
Modern browsers support vh and vw units, which are a percentage of the window viewport.
现代浏览器支持 vh 和 vw 单位，它们是窗口视口的百分比。
So you can have pure CSS borders as a percentage of the window size:
因此，您可以将纯 CSS 边框作为窗口大小的百分比：
border: 5vw solid red;
Try this exampleand change window width; the border will change thickness as the window changes size. box-sizing: border-box;may be useful too.
试试这个例子并改变窗口宽度；随着窗口大小的改变，边框的厚度也会改变。box-sizing: border-box;也可能有用。
回答by David Genger
Box Sizing
set the box sizing to border box box-sizing: border-box;and set the width to 100% and a fixed width for the border then add a min-width so for a small screen the border won't overtake the whole screen
框大小
将框大小设置为边框框box-sizing: border-box;并将宽度设置为 100% 和边框的固定宽度，然后添加最小宽度，以便小屏幕边框不会超过整个屏幕
回答by Bradley William Elko
You can make a custom border using a span. Make a span with a class (Specifying the direction in which the border is going) and an id:
您可以使用跨度制作自定义边框。用一个类（指定边界的方向）和一个 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>
Then, go to you CSS and set the class to position:absolute, height:100%(For Vertical Borders), width:100%(For Horizontal Borders), margin:0%and background-color:#000000;. Add everthing else that is necessary:
然后，转到 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;
}
Then set the id that corresponds to class="VerticalBorder"to top:0%;, left:0%;, width:1%;(Since the width of the mdiv is equal to the width of the mheader at 100%, the width will be 100% of what you set it. If you set the width to 1% the border will be 1% of the window's width). Set the id that corresponds to the class="HorizontalBorder"to top:99%(Since it's in a header container the top refers to the position it is in according to the header. This + the height should add up to 100% if you want it to reach the bottom), left:0%;and height:1%(Since the height of the mdiv is 5 times greater than the mheader height [100% = 100, 20% = 20, 100/20 = 5], the height will be 20% of what you set it. If you set the height to 1% the border will be .2% of the window's height). Here is how it will look:
然后设置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%;
}
DISCLAIMER: If you resize the window to a small enough size, the borders will disappear. A solution would be to cap of the size of the border if the window is resized to a certain point. Here is what I did:
免责声明：如果您将窗口调整到足够小的尺寸，边框将消失。如果窗口大小调整到某个点，则解决方案是限制边框的大小。这是我所做的：
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;
}
}
}
If you did everything right, it should look like how it is in this link: https://jsfiddle.net/umhgkvq8/12/For some odd reason, the the border will disappear in jsfiddle but not if you launch it to a browser.
如果你做的一切都正确，它应该看起来像这个链接中的样子：https: //jsfiddle.net/umhgkvq8/12/ 出于某种奇怪的原因，边框将在 jsfiddle 中消失，但如果你将它启动到浏览器，则不会.
回答by ilgice
Take a look at calc() specification. Here is an example of usage:
看看calc() 规范。下面是一个使用示例：
border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);
