css中图形边框的简单布局？如何停止未对齐的边框图形？

Question

CSS 不是我的强项之一！如果我有重复的顶部、左侧、底部、右侧和角落图形，我正在尝试找到一个教程或其他东西，可以为我提供预制的 div 和 css 排列。我觉得我已经足够接近了，但随后发生了可怕的事情。我不想使用新的 css3 实现。

编辑：抱歉不清楚。我只想使用图像作为边框。我有一个左上、右上、左下、右下的图形，以及重复的左、右、上、下图形。我认为 HTML 表格已被弃用，所以我远离它们，但我仍然在正确对齐边框时遇到问题。我要么以某种方式在中间留有小间隙，和/或我不能强制边框仅重复每个 X 像素，以便角图形与顶部/底部和左/右图形对齐。

编辑：我已经非常接近了，但是仍然存在一些丑陋的问题，重复图形没有在正确的位置开始或结束，并且内部背景成为 png 透明度后面的纯色。我会发布我所拥有的。

<div id="box">

        <div id="tl"><div id="tr"><div id="top"></div></div></div>
        <div id="left"><div id="right"><div id="content">
            test text
        </div>
        </div></div>
        <div id="bl"><div id="br"><div id="bottom"></div></div></div>
</div>

我的CSS：

#top {background: url(top.png) repeat-x; width:79%}
#bottom {background: url(bottom.png) repeat-x;height:58px;width:auto;margin-left:auto;margin-right:auto;width:79%;}
#left {background: url(left.png)  repeat-y}
#right {background: url(right.png) repeat-y 100% 100%}
#bl {background: url(corner4.png) 0 100% no-repeat;height:55px;margin-left:-6px;}
#br {background: url(corner3.png) 100% 100% no-repeat;height:55px;}
#tl {background: url(corner1.png) 0 0 no-repeat;height:55px;}
#tr {background: url(corner2.png) 100% 0 no-repeat;height:55px; } 

Answer 1

好的...明白了。那么，你的容器有固定宽度吗？如果是的话......

• 为顶部创建一个延伸到整个容器的图像。将该图像作为普通图像放入 HTML 中的容器内，作为第一个元素。

• 为底部创建另一个图像，该图像延伸到整个容器。将此图像作为 HTML 容器内的普通图像作为最后一个元素。

• 创建一个水平背景图像（1 像素高），该图像延伸到整个容器并使用 CSS Repeat-y。这为您提供了任何高度容器的侧面。

...你最终会得到的是这样的：

<div with background image>
   <top image>
       <your content>
   <bottom image>
</div>