HTML/CSS 平铺边框（左、下、右）答案

【问题标题】：HTML/CSS tiled border (left, bottom, right)HTML/CSS 平铺边框（左、下、右）
【发布时间】：2011-09-23 13:19:52
【问题描述】：

如何在不使用 CSS3 的情况下从 CSS/HTML 中的图像创建边框？

我有三个边框图块：左、右、下。应该在我的内容容器的左侧、右侧和底部显示 (repeat-x/y)。

我试图围绕我的内容容器构建 div 容器，但我不知道如何设置属性...

这是最好的方法吗？

【问题讨论】：

标签： html css image border tiles

【解决方案1】：

使用以下 HTML 结构：（解释如下）

<div class="container">

    <div class="left"></div>
    <div class="right"></div>
    <div class="bot"></div>

</div>

还有以下 CSS：

.container {
    position:   relative;
    padding:    5px; // size of your border images
}

.container .left {
    position:   absolute;
    left:       0;
    top:        0;
    background: url(border_left.jpg) repeat-y;
    width:      5px;
    height:     100%;
}

.container .right {
    position:   absolute;
    right:      0;
    top:        0;
    background: url(border_right.jpg) repeat-y;
    width:      5px;
    height:     100%;
}

.container .bot {
    position:   absolute;
    left:       0;
    bottom:     0;
    background: url(border_bot.jpg) repeat-x;
    width:      100%;
    height:     5px;
}

基本上你在这里做的事情如下：

您创建了一个相对定位的容器，因此其中绝对定位的元素将定位在其边界内。它还具有等于（也可能高于）边框图像宽度/高度的填充，以弥补它们占用的空间。
您在容器内添加三个 div，它们被推到容器的左侧、右侧和底部，并沿整个宽度/高度拉伸。

This jsFiddle 说明了我在这里解释的内容，使用背景颜色而不是图像。

您可以看到边框在角落重叠，您可以通过创建位于角落的额外图像来解决此问题。

【讨论】：

【解决方案2】：

我建议容器在底部添加 bg 重复，底部填充，使其相对，并使用 :after 和 :before 放置边框 :) 抱歉现在没有时间编写代码 :(

【讨论】：