Создание рамки вокруг панели HTML с пользовательскими изображениями

Question

Я ищу лучший способ создать пользовательскую рамку вокруг панели HTML. У меня есть набор изображений для сторон, углов и т. Д. Мне нужен хороший способ разместить их и динамически растянуть стороны, чтобы соответствовать размеру панели. Если для этого есть плагин jQuery, я бы предпочел использовать его.

ОБНОВЛЕНИЕ: Моя основная целевая платформа - IE7. Так что это должно работать над этим: (

Answer 1

Свойство CSS3 Border Image ?- Работает во всем, кроме IE.

- EDIT -

Хорошо, чтобы он работал в IE - вам нужно использовать jQuery. Эта статья объясняет, как это сделать.Вы сможете использовать свойство CSS3 для всех принимающих браузеров и использовать плагин jQuery в качестве запасного варианта.

Надеюсь, это поможет.

Answer 2

Вы можете сделать это следующим образом: (за исключением IE6)

HTML:

Внутри коробки, которая должна иметь position relative или выше

<div class="Border Border-N"  />
<div class="Border Border-NE" />
<div class="Border Border-E"  />
<div class="Border Border-SE" />
<div class="Border Border-S"  />
<div class="Border Border-SW" />
<div class="Border Border-W"  />
<div class="Border Border-NW" />

CSS:

.Border {
    position: absolute;
    padding: 0;
    margin: 0;
    border: 0;
    width: 20px;
    height: 20px;
    z-index: 1001;
}

.Border-N {
    top: -20px;
    left: 0;
    width: 100%;
    background-image: url('Border-Top.png');
}

.Border-NE {
    top: -20px;
    right: -20px;
    background-image: url('Border-NE.png');
}

.Border-E {
    top: 0;
    right: -20px;
    height: 100%;
    background-image: url('Border-Right.png');
}

.Border-SE {
    bottom: -20px;
    right: -20px;
    background-image: url('Border-SE.png');
}

.Border-S {
    bottom: -20px;
    left: 0;
    width: 100%;
    background-image: url('Border-Bottom.png');
}

.Border-SW {
    bottom: -20px;
    left: -20px;
    background-image: url('Border-SW.png');
}

.Border-W {
    top: 0;
    left: -20px;
    height: 100%;
    background-image: url('Border-Left.png');
}

.Border-NW {
    top: -20px;
    left: -20px;
    background-image: url('Border-NW.png');
}

Answer 3

Я не знаком с плагинами jQuery, которые делают это, но в HTML это так скучно, как иметь <div> для каждой стороны и угла. Э.Г.

<div class="top-left">
    <div class="top-right">
        <div class="top-center"></div>
    </div>
</div>
<div class="middle-left">
    <div class="middle-right">
        <div class="middle-center"></div>
    </div>
</div>
<div class="bottom-left">
    <div class="bottom-right">
        <div class="bottom-center"></div>
    </div>
</div>

Используйте height и padding, чтобы создать пространство для угловых изображений (что вы, вероятно, захотите сделать в качестве спрайтов), и используйте background-repeat, чтобы повторять тонкие изображения для сторон (если ваш дизайн это поддерживает) .

Вам также может понадобиться применить font-size: 0 к верху и низу <div> s, чтобы заставить определенные высоты работать должным образом в IE 6.