Создание пользовательских границ HTML

Question

Я пытаюсь сделать изменяемый размер боковой панели с пользовательской рамкой, используя .png.У меня есть образец каждой стороны границы и углов, но я не знаю, как сделать так, чтобы мой .png повторялся горизонтально с обеих сторон и так вертикально.

Answer 1

Во-первых, я предполагаю, что вы хотите, чтобы граница была гибкой.

Для CSS3 (IE9 и других современных браузеров) вы можете использовать несколько фонов (например, см. http://jsfiddle.net/RCHtK/). Поместите класс в div (например, fancyBorder) и что-то вроде этого CSS:

.fancyBorder {
    padding: 15px; /* this should probably be set at least to the width of your border image */
    background:
        url(topleftimage.png) top left no-repeat,
        url(toprightimage.png) top right no-repeat,
        url(bottomleftimage.png) bottom left no-repeat,
        url(bottomrightimage.png) bottom right no-repeat,
        url(top.png) top left repeat-x,
        url(bottom.png) bottom left repeat-x,
        url(left.png) top left repeat-y,
        url(right.png) top right repeat-y;         
}

Для более ранних браузеров IE см. Этот пример: http://jsfiddle.net/RCHtK/10/. Это проверено в IE7 и 8 (я думаю, должно работать в IE6) Код можно свести к минимуму с помощью творческого использования псевдоэлементов, если вы хотите только поддерживать IE8. Как видите, для этого необходимо большое количество несемантических div элементов. Соответствующий код здесь:

HTML

<div class="fancyBorder">
<div class="fbInner">
    <div class="fbContent">
    Here is some sample text. <br />
    Here is some sample text. <br />
    Here is some sample text. <br />
    </div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="tl corner"></div>
    <div class="tr corner"></div>
    <div class="bl corner"></div>
    <div class="br corner"></div>
    </div>    
</div>

CSS

.fancyBorder {
    /* left side */
    background: url(leftimg.png) top left repeat-y;
}
.fbInner .fbContent {
    position: relative;
    z-index: 2;
}
.fbInner {
    padding: 15px; /* this should probably be set at least to the width of your border image */
    position: relative;
    /* right side */
    background:url(rightimage.png) top right repeat-y;
}

.fbInner div {
    position: absolute;
    z-index: 0;
}
.fbInner .top {
    top: 0;
    left: 0;
    height: 15px;
    width: 100%;
    background: url(topimage.png) top left repeat-x;
}
.fbInner .bottom {
    height: 15px;
    width: 100%;
    bottom: 0;
    left: 0;
    background: url(bottomimage.png) bottom left repeat-x;
}
.fbInner .corner {
    z-index: 1;
    width: 15px;
    height: 15px;
}

.fbInner .tl {
    top: 0;
    left: 0;
    background: url(topleftimage.png) top left no-repeat;
}
.fbInner .tr {
    top: 0;
    right: 0;
    background: url(toprightimage.png) top right no-repeat
}
.fbInner .bl {
    bottom: 0;
    left: 0;
    background: url(bottomleftimage.png) bottom left no-repeat;
}
.fbInner .br {
    bottom: 0;
    right: 0;
    background: url(bottomrightimage.png) bottom right no-repeat;
}

Answer 2

CSS3 border-image

Answer 3

Простой способ создать рамку по изображению, просто загрузите ваше изображение на ЭТОТ САЙТ и установите значение с помощью данной кнопки: