我正在尝试使用.png制作具有自定义边框的可调整大小的侧边栏。
我有一个边界和角的每一侧的样本,但是我不知道如何使我的.png在左右两边水平重复,然后在垂直方向重复。
最佳答案
首先,我假设您希望边框灵活。
对于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;
}