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

【问题标题】：Creating a border around an HTML panel with custom images使用自定义图像在 HTML 面板周围创建边框
【发布时间】：2010-03-22 15:29:00
【问题描述】：

我正在寻找在 HTML 面板周围创建自定义边框的最佳方式。我有一组侧面、角落等的图像。我需要一种很好的方法来放置它们并动态拉伸侧面以匹配面板尺寸。如果有一个 jQuery 插件可以做到这一点，我更喜欢使用它。

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

【问题讨论】：

HTML“面板”到底是什么意思？放置和拉伸、通过标记、通过 JavaScript 或通过用户拖放内容是什么意思？请澄清。
你可能想在 doctype.com 上问这个问题
回答佩卡。该面板是一个DIV。拉伸是通过标记制作 1 像素宽的图像，覆盖整个顶部和底部边框等。

标签： jquery html jquery-plugins css

【解决方案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');
}

【讨论】：

【解决方案2】：

CSS3 Border Image property? - 适用于除 IE 之外的所有应用程序。

--编辑--

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

希望这会有所帮助。

【讨论】：

我需要它，尤其是在 IE 上 :(

【解决方案3】：

我不熟悉执行此操作的 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>s 以使定义的高度在IE 6 中正常工作。

【讨论】：