CSS scaling a border-image

2019-06-20 04:46发布

站内文章 / HTML/CSS
19 0 0

问题:

I am seeking some assistance creating a border that scales with different screen sizes/devices. I've attached both the desired outcome, html/css I've written so far and a live page to preview the results so far.

Issues/Questions:

  1. The border is set using pixels, and I'm concerned that it won't scale to the proper proportions on different devices/browsers.
  2. The corners don't match very well.
  3. Is there a better way to achieve the desired border so as to scale proportionally and achieve the desired corner formatting? Maybe a vector image?

I'm close to achieving a match, but there must be a (more simple? better?) way to re-create that type of border. Many thanks for looking this over and for your input.

Regards,

Zephyr

EDIT/UPDATE:

I've also tried using background-image: and creating six .png files, one for each corner with a solid white background, and one each for the top/bottom and left/right sides of the "border". Again, it's close but the images don't always line up correctly.

There must be a way to do this, perhaps in a svg image that scales itself depending on the size of the section its in, but that is way beyond my talents.

Thanks for considering the issue!

The desired formatting:

See the desired formatting here

The current results & 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>

Original code using 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>

回答1:

Could this solve your problem? 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;
}

Instead of use a real border-image use a fake parent div with the background of your image (repeated) and then set to white the background to don't show background (border) of the parent div.

I you need more help just comment.



回答2:

SOLUTION!

As suggested by José Cabo (above) I stumbled across an example of the repeating-linear-gradient property here and coupled with a solid white background for the content div, I have exactly what I was hoping to achieve - all with only a few lines of CSS.

No messing with images and corners and pixel widths... grrr.

Simple, elegant, scalable - beautiful!

I have more testing to do using other browsers, but it works in Safari, and that's a giant leap toward what I'm trying to achieve.

See the solution here

Regards,

Zephyr

<!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 border scaling css3
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~