如何在css中创建具有背景的灵活div

Question

我正在尝试创建一个具有背景的灵活div，如下所示，有关如何在css中执行此操作的任何建议？

Answer 1

为了获得最佳的跨浏览器兼容性，我建议将该框分为三部分：

顶部和底部部分没有变化。中间的应该具有3px高度和全宽度并且重复到y轴。

<div id="shadowbox">
  <div class="content">Your Content here</div>
  <div id="boxending"><!-- --></div>
</div>

#shadowbox {
 background: url(box_top_bg.gif) 0 0 no-repeat;
}

#shadowbox.content {
  background: url(box_content_bg.gif) 0 0 repeat-y;
  margin-top: //as high, as the top picture is
}

#boxending {
  background: url(box_bottom_bg.gif) 0 0 no-repeat;
}

如果您没有使用重置样式表，那么显示行高的空div可能会出现问题。看看这个！