Zep*_*ays 6 css scaling border css3
我正在寻求一些帮助,创建一个可以根据不同屏幕尺寸/设备进行扩展的边框 我已经附上了预期的结果,到目前为止我写的html/css和一个实时页面来预览到目前为止的结果.
我接近完成一场比赛,但必须有一种(更简单？更好？)的方式来重新创造这种类型的边界.非常感谢您对此的看法以及您的意见.
问候,
和风
我也尝试过使用background-image:和创建六个.png文件,每个角落一个带有纯白色背景,一个用于"边框"的顶部/底部和左/右侧.再次,它很接近,但图像并不总是正确排列.
必须有一种方法可以做到这一点,也许是在一个svg图像中,根据其所在部分的大小来扩展自己,但这超出了我的才能.
谢谢你考虑这个问题!
<!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>
正如 Jos\xc3\xa9 Cabo（上图）所建议的那样，我在这里偶然发现了该repeating-linear-gradient属性的一个示例，并加上内容 div 的纯白色背景，我正是我希望实现的目标 -所有这些都只需几行CSS。
不要弄乱图像、角落和像素宽度... grrr。
\n\n简单、优雅、可扩展——美丽！
\n\n我需要使用其他浏览器进行更多测试，但它可以在 Safari 中运行，这对我想要实现的目标来说是一个巨大的飞跃。
\n\n\n\n问候，
\n\n和风
\n\n<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">\n<html lang="en">\n<head>\n <meta http-equiv="content-type" content="text/html; charset=utf-8"> \n <title>\n EP Layout Test \n </title>\n <style type="text/css" >\n .ep { \n padding: 1.5em;\n background: -moz-repeating-linear-gradient(top left -45deg, black, black 1.1em, white 1em, white 2em); \n background: -ms-repeating-linear-gradient(top left -45deg, black, black 1.1em, white 1em, white 2em); \n background: -o-repeating-linear-gradient(top left -45deg, black, black 1.1em, white 1em, white 2em);\n background: -webkit-repeating-linear-gradient(-45deg, black, black 1.1em, white 1em, white 2em);\n width: 70%;\n margin-left: auto;\n margin-right: auto;\n }\n .ep_content {\n padding: .5em;\n background: white;\n }\n .ep_title {\n background-color: black;\n padding: 0.5em 0em;\n color: white;\n }\n p {\n text-align:left;\n }\n\n </style> \n</head>\n<body>\n <p>\n This is some regular text. \n </p>\n <div class="ep">\n <div class="ep_content">\n <h3 class="ep_title">\n SINGLE-ENGINE FAILURE/FLAMEOUT \n </h3>\n <p>\n Symptoms: \n </p>\n <ol>\n <li>\n TGT, Ng, torque, and Np on malfunctioning engine decreasing toward zero. \n </li>\n <li>\n NO. 1 ENG OUT or NO. 2 ENG OUT warning light illuminated. \n </li>\n </ol>\n <p>\n Corrective Action: \n </p>\n <ol>\n <li class="boldface">\n Nr - MAINTAIN. \n </li>\n <li class="boldface">\n CONTGCY PWR - ON. \n </li>\n <li class="boldface">\n Altitude/Airspeed - AS REQUIRED. \n </li>\n <li class="boldface">\n Fuel/stores - JETTISON AS REQUIRED. \n </li>\n <li class="boldface">\n ENG Anti-ice - AS REQUIRED. \n </li>\n <li>\n Analyze. \n </li>\n </ol>\n <p>\n If no indication of mechanical malfunction or engine fire: \n </p>\n <ol start="7">\n <li>\n Perform Engine Restart Procedure. \n </li>\n </ol>\n <p>\n If Engine Restart Procedure is not to be performed: \n </p>\n <ol start="8">\n <li>\n Conduct EMER ENG SHUTDOWN. \n </li>\n <li>\n LAND AS SOON AS PRACTICABLE. \n </li>\n </ol>\n </div>\n </div>\n <p>\n This is some regular text. \n </p>\n</body>\n| 归档时间： |
|
| 查看次数： |
4440 次 |
| 最近记录： |