CSS масштабирование изображения границы

Я ищу некоторую помощь в создании границы, что Весы с различными размерами экрана/устройства. Я прикрепил как желаемый результат, html / css, который я написал до сих пор, так и живую страницу для предварительного просмотра результатов.

Вопросы:

  1. граница устанавливается с использованием пикселей, и я обеспокоен тем, что она не будет масштабироваться до надлежащих пропорций на разных устройствах/браузерах.
  2. углы не очень хорошо сочетаются.
  3. есть лучший способ достичь желаемой границы, чтобы масштабироваться пропорционально и достичь желаемого форматирования угла? Может быть, векторное изображение?

Я близок к достижению матча ,но должен быть (более простой? лучше?) способ воссоздания такого типа границы. Большое спасибо за просмотр и за Ваш вклад.

С уважением,

Борей

ИЗМЕНИТЬ/ОБНОВИТЬ:

Я также пробовал использовать background-image: и создание шести .PNG-файлы для каждый угол с сплошным белым фоном и по одному для верхней/нижней и левой/правой сторон "границы". Опять же, это близко, но изображения не всегда выстраиваются правильно.

должен быть способ сделать это, возможно, в svg-изображении, которое масштабируется в зависимости от размера раздела, но это выходит за рамки моих талантов.

Спасибо за рассмотрение вопроса!

требуемое форматирование:

посмотреть нужные форматирование здесь

текущие результаты & html / css:

посмотреть border-image: здесь

посмотреть background-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 { 
    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>
6
border css css3 scaling

2 ответов

может ли это решить вашу проблему? 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.

мне нужна дополнительная помощь, просто прокомментируйте.

1

решение!

как предложил Хосе Кабо (выше), я наткнулся на пример repeating-linear-gradient свойства здесь и в сочетании с твердым белым фоном для контента div, у меня есть ровно чего я надеялся достичь -все с несколькими строками CSS.

нет возиться с изображениями и углами и шириной пикселей... гррр.

простой, элегантный, масштабируемой - прекрасно!

у меня есть больше тестов, чтобы сделать с помощью других браузеров, но он работает в Safari, и это гигантский скачок к тому, что я пытаюсь достичь.

смотрите решение здесь

С уважением,

Борей

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

0