html中向下平铺,HTML / CSS平铺边框（左，下，右）

使用以下HTML结构:(以下说明)

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

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