我正在寻求一些帮助，以创建可随不同屏幕尺寸/设备缩放的边框。我已经附上了想要的结果，我到目前为止写的 html/css 和一个实时页面来预览迄今为止的结果。
问题/疑问：
- 边框是使用像素设置的，我担心它不会在不同的设备/浏览器上缩放到正确的比例。
- 边角不太匹配。
- 有没有更好的方法来实现所需的边框，以便按比例缩放并实现所需的角格式？也许是矢量图像？
我接近实现匹配，但必须有一种（更简单？更好？）方法来重新创建这种类型的边框。非常感谢您查看此内容并提供您的意见。
问候，
和风
编辑/更新：
我还尝试使用background-image:和创建六个 .png 文件，每个角一个，具有纯白色背景，一个用于“边框”的顶部/底部和左侧/右侧。同样，它很接近，但图像并不总是正确排列。
必须有一种方法可以做到这一点，也许是在一个 svg 图像中，它可以根据其所在部分的大小自行缩放，但这超出了我的才能。
感谢您考虑这个问题！
所需的格式：
当前结果 & html/css：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
EP Layout Test
</title>
<style type="text/css">
.ep {
background-image: url(ep_border_top_left-w.png), url(ep_border_top_right-w.png),url(ep_border_bottom_right-w.png), url(ep_border_bottom_left-w.png), url(ep_border_vertical.png), url(ep_border_vertical.png), url(ep_border_horizontal.png), url(ep_border_horizontal.png);
background-position: top left, top right, bottom right, bottom left, left, right, top, bottom;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y, repeat-x, repeat-x;
width: 70%;
margin-left: auto;
margin-right: auto;
}
.ep_content {
padding: 2.5em;
}
.ep_title {
background-color: black;
padding: 0.5em 0em;
color: white;
}
p {
text-align:left;
}
</style>
</head>
<body>
<p>
This is some regular text.
</p>
<div class="ep">
<div class="ep_content">
<h3 class="ep_title">
SINGLE-ENGINE FAILURE/FLAMEOUT
</h3>
<p>
Symptoms:
</p>
<ol>
<li>
TGT, Ng, torque, and Np on malfunctioning engine decreasing toward zero.
</li>
<li>
NO. 1 ENG OUT or NO. 2 ENG OUT warning light illuminated.
</li>
</ol>
<p>
Corrective Action:
</p>
<ol>
<li class="boldface">
Nr - MAINTAIN.
</li>
<li class="boldface">
CONTGCY PWR - ON.
</li>
<li class="boldface">
Altitude/Airspeed - AS REQUIRED.
</li>
<li class="boldface">
Fuel/stores - JETTISON AS REQUIRED.
</li>
<li class="boldface">
ENG Anti-ice - AS REQUIRED.
</li>
<li>
Analyze.
</li>
</ol>
<p>
If no indication of mechanical malfunction or engine fire:
</p>
<ol start="7">
<li>
Perform Engine Restart Procedure.
</li>
</ol>
<p>
If Engine Restart Procedure is not to be performed:
</p>
<ol start="8">
<li>
Conduct EMER ENG SHUTDOWN.
</li>
<li>
LAND AS SOON AS PRACTICABLE.
</li>
</ol>
</div>
</div>
<p>
This is some regular text.
</p>
</body>
</html>
使用边框图像的原始代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
EP Layout Test
</title>
<style type="text/css">
.ep {
border-width: 32px 31px 32px 31px;
border-image: url(chapter_3_background-small.png) 32 31 32 31 round round;
border-color: #cccccc;
border-style: solid;
width: 70%;
margin-left: auto;
margin-right: auto;
}
.ep_title{
background-color: black;
padding: 0.5em 0em;
color: white;
}
p {
text-align:left;
}
</style>
</head>
<body>
<p>
This is some regular text.
</p>
<div class="ep">
<h3 class="ep_title">
SINGLE-ENGINE FAILURE/FLAMEOUT
</h3>
<p>
Symptoms:
</p>
<ol>
<li>
TGT, Ng, torque, and Np on malfunctioning engine decreasing toward zero.
</li>
<li>
NO. 1 ENG OUT or NO. 2 ENG OUT warning light illuminated.
</li>
</ol>
<p>
Corrective Action:
</p>
<ol>
<li class="boldface">
Nr - MAINTAIN.
</li>
<li class="boldface">
CONTGCY PWR - ON.
</li>
<li class="boldface">
Altitude/Airspeed - AS REQUIRED.
</li>
<li class="boldface">
Fuel/stores - JETTISON AS REQUIRED.
</li>
<li class="boldface">
ENG Anti-ice - AS REQUIRED.
</li>
<li>
Analyze.
</li>
</ol>
<p>
If no indication of mechanical malfunction or engine fire:
</p>
<ol start="7">
<li>
Perform Engine Restart Procedure.
</li>
</ol>
<p>
If Engine Restart Procedure is not to be performed:
</p>
<ol start="8">
<li>
Conduct EMER ENG SHUTDOWN.
</li>
<li>
LAND AS SOON AS PRACTICABLE.
</li>
</ol>
</div>
<p>
This is some regular text.
</p>
</body>
</html>