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

Question

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

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

编辑:我已经很接近了，但是重复图形没有在正确的位置开始或结束，以及让内部背景成为 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>