html - 制作自定义边框html

Question

我正在尝试使用 .png 制作带有自定义边框的可调整大小的侧边栏。我有边界和 Angular 每一侧的样本，但我不知道如何使我的 .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;
}