制作自定义边框html
我正在尝试使用.png制作带有自定义边框的可调整大小的边栏。制作自定义边框html,html,css,Html,Css,我正在尝试使用.png制作带有自定义边框的可调整大小的边栏。 我有边框和角的每一侧的示例,但我不知道如何使我的.png在两侧水平和垂直重复。首先,我假设您希望边框灵活 对于CSS3IE9和其他现代浏览器,您可以使用多种背景,例如,请参阅。将一个类放在一个div上,比如fancyBorder和类似以下CSS的东西: .fancyBorder { padding: 15px; /* this should probably be set at least to the width of yo
我有边框和角的每一侧的示例,但我不知道如何使我的.png在两侧水平和垂直重复。首先,我假设您希望边框灵活 对于CSS3IE9和其他现代浏览器,您可以使用多种背景,例如,请参阅。将一个类放在一个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浏览器,请参见以下示例:。这是在IE7和IE8中测试的,我相信应该在IE6中工作。如果您只想支持IE8,那么可以通过创造性地使用伪元素来最小化代码。如您所见,需要大量非语义div元素来完成这项工作。相关代码如下:
HTML
CSS3创建图像边框的简单方法,只需上传图像并按给定按钮设置值:虽然我喜欢border image属性的想法,但它的实现需要改进,并且缺乏IE支持,甚至IE9也不如多背景解决方案对我有吸引力。然而,这当然是一个可以满足波斯尼亚需求的选项。如果是我的选择,我会使用边界图像,称之为渐进增强,并保存7个http请求。然而,我发现你的解决方案非常有趣!将一些图像合并到精灵中,我可以将http请求减少到2或3,这取决于上/下边框是否匹配左/右边框,方法是将所有四个角放在一个图像中,将重复的图像放在1或2中,并设置背景位置,我已经决定你的答案至少值得我投赞成票,因为这是一个可能的解决方案,这在很大程度上取决于设计师的目标和目标受众。我想在这个joomla站点上创建一个块。。左侧边栏。。。如果你看代码,它会显示分开的左边框,底部和顶部。。。如何使它像那样…并且灵活,以便它随着我放入更多内容而扩展:
<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>
.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;
}