您可以使用跨度制作自定义边框。用一个类（指定边界的方向）和一个 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%;,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%，则边框将是窗口高度的 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 中消失，但如果您将其启动到浏览器则不会。