css - 我如何在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 显示行高的问题。看看这个!