Question

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

编辑：SOrry不清楚。我只想用图像作为边框。我有一个图片，用于topleft，topright，bottomleft，right right，以及重复左右和顶部和底部图形。我认为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>

在CSS中简单布局图形边框？如何阻止错位边框图形？

1 个答案: