代码之家 › 专栏 › 技术社区 › Ron Harlev

在带有自定义图像的HTML面板周围创建边框

css jquery-plugins html jquery

Ron Harlev · 技术社区 · 15 年前

我正在寻找在HTML面板周围创建自定义边框的最佳方法。我有一套侧面、角落等的图片。我需要一个好的方法来放置它们,并动态拉伸边以匹配面板大小。如果有jquery插件可以做到这一点,我宁愿使用它。

更新:我的主要目标平台是IE7。所以它必须努力:(

3 回复 | 直到 15 年前

SLaks 15 年前

你可以这样做:(除了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');
}

Jonny Haynes 15 年前

CSS3 Border Image property ?-除IE外,任何东西都适用。

--编辑——

可以在IE中工作了-您需要使用jquery。 This article 解释如何操作。您将能够为所有人使用css3属性 adopting 浏览器和使用jquery插件作为回退。

希望这有帮助。

Fenton 15 年前

我不熟悉这样做的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 & GT; 使规定高度在IE 6中正常工作。