如何用百分比設置元素的邊框寬度？我嘗試了語法
border-width:10%;但是不管用。
我想用百分比來設置邊框寬度的原因是我有一個寬度為80%的元素；和身高: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'如你所見，上面寫著百分比:不適用。
非腳本解決方案 您可以使用包裝元素來模擬您的百分比邊框，您可以:
將包裝元素的背景色設置為您想要的邊框顏色 以百分比設置包裝元素的填充(因為它們受支持) 將你的元素背景色設置為白色(或者其他任何需要的顏色) 這將在某種程度上模擬你的百分比邊界。這里有一個使用這種技術的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>你也可以使用
border-left: 9vw solid #F5E5D6;
border-right: 9vw solid #F5E5D6;運籌學
border: 9vw solid #F5E5D6;這是一個老問題，但是對于那些仍然在尋找答案的人來說，CSS屬性框大小在這里是無價的:
-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/
你可以用em來表示百分比而不是像素，
示例:
border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */百分比值不適用于CSS中的邊框寬度。這列在規格中。
您將需要使用JavaScript來計算元素的寬度百分比或您需要的任何長度數量，并將結果應用于px或類似元素的邊框。
現代瀏覽器支持vh和vw單位，它們是窗口視口的百分比。
因此，您可以將純CSS邊框作為窗口大小的百分比:
border: 5vw solid red;嘗試此示例并更改窗口寬度；隨著窗口大小的改變，邊框的粗細也會改變?？虼笮?邊框-框；可能也有用。
盒子尺寸 將框大小設置為邊框框大小:邊框框；將寬度設置為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；。添加所有必要的東西:
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%；，左:0%；，寬度:1%；(因為mdiv的寬度等于mheader的寬度的100%，所以寬度將是您設置的100%。如果將寬度設置為1%，邊框將為窗口寬度的1%)。將對應于class="HorizontalBorder "的id設置為top:99%(因為它在標題容器中，所以top指的是它在標題中的位置。這個+高度加起來要100%才能達到底部)，左:0%；和高度: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中消失，但如果你在瀏覽器中啟動它，它不會消失。
[從2023年起]我用容器查詢單元解決了這個問題(特別是cqmin)
border: 0.5cqmin solid black;這會將邊框設置為容器寬度或高度的0.5%(以較小者為準)。
MDN:https://developer . Mozilla . org/en-US/docs/Web/CSS/CSS _ Container _ Queries W3C草案:https://www.w3.org/TR/css-contain-3/#container-lengths 卡努斯:https://caniuse.com/css-container-query-units CQ min:cqi或cqb中的較小值 https://www.w3.org/TR/css-contain-3/#container-lengths
cqb:塊尺寸的度量:在水平寫入模式中是指物理高度(垂直尺寸),在垂直寫入模式中是指物理寬度(水平尺寸)。 https://www.w3.org/TR/css-writing-modes-4/#block-size
cqi:行內維度的度量:在水平寫入模式中是指物理寬度(水平維度)，在垂直寫入模式中是指物理高度(垂直維度)。 https://www.w3.org/TR/css-writing-modes-4/#inline-size
看看calc()規范。下面是一個用法示例:
border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);