如何设置边界的百分比厚度？
如何以百分比设置元素的边框宽度？ 我尝试了语法
border-width:10%; 但它不起作用。
编辑：
我想以百分比设置边框宽度的原因是因为我有一个width: 80%;的元素width: 80%; 和height:80%; ，我想要元素覆盖整个浏览器窗口，所以我想设置所有边框10％。 我不这样做的两个元素的方法，其中一个将被放置在另一个作为边界，因为元素的背景是透明的，定位元素后面会影响其透明度。
我知道这可以通过JavaScript来完成，但是我正在寻找一个只有CSS的方法，如果可能的话。
边界不支持百分比…但仍然有可能…
正如其他人指出的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。
非脚本解决scheme
你可以用一个包装元素来模拟你的百分比边界，你可以：
- 将包装元素的
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>
所以这是一个较老的问题，但对于那些仍在寻找答案的人来说，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的任何边框都将包含在该百分比内。 所以，例如，下面的代码将在div的宽度内添加1px边框：
div { box-sizing:border-box; width:50%; border-right:1px solid #000; }
如果您想了解更多信息： http ： //css-tricks.com/box-sizing/
你也可以使用
border-left: 9vw solid #F5E5D6; border-right: 9vw solid #F5E5D6;
要么
border: 9vw solid #F5E5D6;
您可以使用em来代替像素的百分比，
例：
border:10PX dotted #c1a9ff; /* In Pixels */ border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */
百分比值不适用于CSS中的border-width 。 这在规格中列出。
您将需要使用JavaScript来计算元素宽度的百分比或您需要的任何长度数量，并将结果应用于px或类似元素的边框。
现代浏览器支持vh和vw单位 ，这是窗口视口的百分比。
所以你可以有纯CSS边框作为窗口大小的百分比：
border: 5vw solid red;
试试这个例子 ，改变窗口宽度; 当窗口改变大小时，边框将会改变厚度。 box-sizing: border-box; 也可能有用。
盒子大小
将框尺寸设置为边框框box-sizing: border-box; 并将宽度设置为100％，为边框设置固定宽度，然后添加最小宽度，因此对于小屏幕，边框不会超过整个屏幕
您可以使用跨度制作自定义边框。 用一个类来做一个跨度（指定边界的走向）和一个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; 。 添加everthing其他这是必要的：
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; }
然后将对应于class="VerticalBorder"的id设置为top:0%; ， left:0%; ， width:1%; （因为mdiv的宽度等于100％的mheader的宽度，宽度将是你设置的宽度的100％，如果将宽度设置为1％，边框将是窗口宽度的1％） 。 将对应于class="HorizontalBorder"的id设置为top:99% （因为它位于标题容器中，顶部是指根据标题所在的位置，如果你的话，这个高度应该加起来为100％想要达到底部）， left:0%; 和height:1% （因为mdiv的高度比mheader的高度大5倍[100％= 100,20％= 20,100/20 = 5]，高度将是你设置的20％。如果将高度设置为1％，则边框将为窗口高度的2％）。 以下是它的外观：
span#Span1{ top:0%; left:0%; width:.4%; } span#Span2{ top:99%; left:0%; width:1%; }
免责声明：如果您调整窗口的大小足够小，边界将消失。 如果窗口被调整到某个特定点，解决scheme将是边界大小的上限。 这是我做的：
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，但不是如果你启动它的浏览器。
