我需要帮助创建一个可以随不同屏幕大小/设备而缩放的边框。我已经附上了期望的结果、我目前编写的html/css和一个预览结果的实时页面。
问题/疑问：
- 边框是使用像素设置的，我担心它在不同的设备/浏览器上不能按比例缩放。
- 四个角不太匹配。
- 有没有更好的方法来实现所需的边框，以便按比例缩放并实现所需的角落格式？也许是矢量图像？
我接近实现匹配，但肯定有一种（更简单？更好？）的方式来重新创建那种类型的边框。非常感谢您查看此内容并提供意见。
问候，
Zephyr
编辑/更新：
我还尝试使用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>