css - Div容器清理？

Question

只是想知道是否有可能清理(做同样的事情需要更少的代码)制作这个 div 容器。基本上它只是一个带有背景图像的 div，但是 div 的顶部和底部有圆 Angular 图形，这就是为什么我在容器 div 中有顶部、中间和底部 div。

<div class="fbox">
<div class="ftop"></div>
<div class="fmid">

Fullbox Text Goes Here

</div>
<div class="fbot"></div>
</div>

CSS:

 .fbox {
  width: 934px;
  margin: 0 auto;
  opacity: 0.70;
 }

 .ftop {
  width: 934px;
  background:url(../images/cb/full.png) no-repeat 0 -34px;
  height: 17px;
  margin:0
 }
 .fmid {
  width: 894px;
  padding-left: 20px;
  padding-right: 20px;
  background:url(../images/cb/fullmid.png) repeat-y;
  min-height: 50px;
  margin:0
 }
 .fbot {
  width: 934px;
  background:url(../images/cb/full.png) no-repeat 0 -17px;
  height: 17px;
  margin:0
 }

结果: http://img709.imageshack.us/img709/6681/fbox.jpg

Answer 1

http://www.the-art-of-web.com/css/border-radius/

您可以将 CSS Border Radius 与单个 div 一起使用，而不是创建顶部和底部。 IE 不会识别这一点，但也有一些方便的解决方法。

我通常会使用 CSS3 PIE，它是 IE 的 htc 行为。它做了一堆其他的东西，比如线性渐变背景颜色等。你所做的就是为每个浏览器提供边框半径 css，浏览器就会知道使用哪个。 http://css3pie.com/

.yourbox {
   /* PIE Sample */
    border: 1px solid #696;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    behavior: url(/PIE.htc);
}

不过，您真正需要的只是其他浏览器的边框半径。