所需的格式：

Question

我正在寻求一些帮助，创建一个可以根据不同屏幕尺寸/设备进行扩展的边框。我已经附上了我想要的结果，到目前为止我写的html / css以及一个实时页面来预览到目前为止的结果。

问题/问题：

边框是使用像素设置的，我担心它不会在不同的设备/浏览器上缩放到适当的比例。
角落不太匹配。
是否有更好的方法来实现所需的边框，以便按比例缩放并实现所需的边角格式？也许是矢量图像？

我接近完成一场比赛，但必须有一种（更简单？更好？）的方式来重新创造这种类型的边界。非常感谢您对此进行了观察并获得了您的意见。

此致

西风

EDIT / UPDATE：

我也尝试过使用background-image:并创建六个.png文件，每个角落一个，背景为纯白色，另一个角落为“边框”的上/下和左/右边。再次，它很接近，但图像并不总是正确排列。

必须有一种方法可以做到这一点，也许是在一个svg图像中，根据其所在部分的大小进行缩放，但这超出了我的能力。

感谢您考虑此问题！

所需的格式：

See the desired formatting here

目前的结果＆amp; HTML / CSS：

See the border-image: results here

See the background-image: results here

<!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>

使用border-image

<!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>

Answer 1

这可以解决您的问题吗？ http://jsfiddle.net/65nhJ/

<div id="borderImage" >
    <div class="ep" >Text</div>
</div>

CSS：

#borderImage{
   /* background-image: url(chapter_3_background-small.png); */ /*Your border image*/
    background-color: red; /*removeme*/
    width: 70%;
    margin: 0 auto;
    padding: 20px; /*Border size*/
}
.ep {
    background-color: white;
}

不使用真正的边框图像而是使用带有图像背景的假父div（重复），然后将背景设置为白色，以便不显示父div的背景（边框）。

我需要更多帮助才能发表评论。

Answer 2

的解决方案！

正如JoséCabo（上图）所建议的那样，我偶然发现了repeating-linear-gradient属性here的示例，并结合了内容div的纯白色背景，我完全我希望实现的目标 - 只需几行CSS。

没有弄乱图像和角落以及像素宽度...... grrr。

简单，优雅，可扩展 - 美观！

我有更多的测试要使用其他浏览器，但它适用于Safari，这是我想要实现的目标的巨大飞跃。

See the solution here

此致

西风

<!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 { 
        padding: 1.5em;
        background: -moz-repeating-linear-gradient(top left -45deg, black, black 1.1em, white 1em, white 2em); 
        background: -ms-repeating-linear-gradient(top left -45deg, black, black 1.1em, white 1em, white 2em); 
        background: -o-repeating-linear-gradient(top left -45deg, black, black 1.1em, white 1em, white 2em);
        background: -webkit-repeating-linear-gradient(-45deg, black, black 1.1em, white 1em, white 2em);
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    .ep_content {
        padding: .5em;
        background: white;
    }
    .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>

CSS缩放边框图像

问题/问题：

EDIT / UPDATE：

所需的格式：

目前的结果＆amp; HTML / CSS：

使用border-image

2 个答案:

的解决方案！