Question

我正在寻找在HTML面板周围创建自定义边框的最佳方法。我有一组侧面，角落等的图像。我需要一个很好的方法来放置它们并动态拉伸边以匹配面板尺寸。如果有一个jQuery插件来执行此操作，我宁愿使用它。

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

Answer 1

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

Answer 2

CSS3 Border Image property？ - 适用于IE以外的所有内容。

- 编辑 -

好的，它可以在IE中运行 - 你需要使用jQuery。 This article解释了如何做到这一点。您将能够为所有adopting浏览器使用CSS3属性，并使用jQuery插件作为后备。

希望这有帮助。

Answer 3

我不熟悉执行此操作的jQuery插件，但在HTML中，每个边角都有<div>，这很无聊。 E.g。

<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>，以使定义的高度在IE 6中正常工作。

使用自定义图像在HTML面板周围创建边框

3 个答案:

HTML：

CSS：