Question

只是想知道是否可以清理（制作同样的东西所需的代码更少）制作这个div容器。基本上它只是一个带有背景图像的div而不是顶部和背景图像。 div的底部有圆角图形角，这就是为什么我在容器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);
}

你真正需要的只是其他浏览器的边界半径。

Answer 2

您可以使用border-radius CSS属性。在Firefox中，您将使用-moz-border-radius，在WebKit中，您将使用-webkit-border-radius。我通常会使用这三个。这将围绕框的角落，而不需要所有额外的div。

当然，IE的用户是S.O.L.但有时候你需要稍微花点时间，对吗？：）

<div id="box">Blah blah blah.</div>
#box{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}

Answer 3

最简单的方法是使用border-radius，但它在所有浏览器中都不兼容。支持是体面的。此外，覆盖所有支持的浏览器需要特定于供应商的代码，这有点令人讨厌：

-webkit-border-radius: 4px; /* Vendor code */
-moz-border-radius: 4px; /* Vendor code */
border-radius: 4px; /* CSS 3 Standard */

您可以为应用了border-radius的div添加边框，并且它会按照您希望的方式跟随圆角。

Answer 4

如果你必须使用听起来像的图像。创建一个具有所需边框的单个图像文件，并使用特殊的css选择器调整背景位置，以便不加载3个不同的背景图像。

.fbox .border {
   background: url(bg.png);
}
.border.mid {
   background-position: center center;
   background-repeat: repeat-y
}
.border.top {
   background-position: top left;
   background-repeat: no-repeat
}

依旧等等

我不能确切地说你将如何调整bg位置，因为它取决于你使用的图像以及你是否使用恒定的固定宽度。但我强烈建议只使用一个图像，然后使用额外的选择器来移动bg位置。

Div容器清理？

4 个答案: