Question

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

我有三个边框拼贴：左边，右边，底边。应该在我的内容容器的左侧，右侧和底部显示（repeat-x / y）。

我试图围绕我的内容容器构建div容器，但我无法弄清楚如何设置属性......

这是最好的方法吗？

Answer 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说明了我在这里解释的内容，使用背景颜色代替图像。

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

Answer 2

我建议容器添加bg重复在底部，底部填充，使其相对，并使用：after和：before before border :)抱歉没时间编写代码：（

HTML / CSS平铺边框（左，下，右）

2 个答案: