如何在不使用CSS3的情况下创建圆角框？

Question

我必须通过背景图片创建一个圆角框。

我的CSS代码是：

background-image: url('/images/content/center/top.png'), url('/images/content/center/grad.png'), url('/images/content/center/cont.png');
background-position: top center, bottom center, center center;
background-repeat: no-repeat, no-repeat, no-repeat;

它看起来像这样：

我必须使居中的1px线填充可用空间（通过CSS）。 由于IE，我不允许使用box-radius（CSS3）。

我该如何做到这一点？

Answer 1

您的中心背景不会重复：

background-repeat: no-repeat, no-repeat, no-repeat;
                              ^^^^^^^^^

将其更改为repeat-y，看看会发生什么：

background-repeat: no-repeat, repeat-y, no-repeat;

另外，你做知道这对IE8及以下版本根本不起作用吗？

Answer 2

我不确定你的标记是什么，如果我必须支持所有浏览器，我会像这样布置我的代码。

<div class="container">
   <div class="top"></div>
   <div class="middle">ALL your text goes in here</div>
   <div class="bottom"></div>
</div>

和css一样

.container{
   width:300px;
}
.top, .bottom{
   width:100%;
   height:30px;
   display:block;
   float:left;
   background-repeat:no-repeat;
}
.top{
   background-image:url;
   }
.bottom{
   background-image:url;
   }
.middle{
   width:100%;
   display:block;
   background-image:url;
   background-repeat:repeat-y;
}