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>