在整个#wrapper周围制作投影的最佳语义和有效方法是什么？在所有方面

Question

在整个#wrapper周围制作投影的最佳语义和有效方法是什么？在所有方面。水平可以固定，但垂直应该是可扩展的。

Answer 1

• 一些JavaScript技巧
• CSS3或自定义浏览器样式
• 使用#wrapper
周围的图片

阴影很难在语义上正确，因为它们没有任何意义。它只是一个装饰（演示）元素。

Answer 2

如果您愿意使用IE的另一种非语义方法you could simply use CSS 3 for current (Webkit and Gecko based) browsers：

box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

http://www.css3.info/images/box-shadow.png

当然，对于IE，你还有其他一些选择。

• 使用单个图像作为带投影的背景。

• Use some CSS trickery to have a few wrapper divs with some small borders that composite the shadow

  http://www.alistapart.com/d/onionskin/images/onionskin_cover.gif

• Use javascript to create the drop shadow

最后一个的优势在于，您可以在启用CSS3的浏览器上使用CSS box-shadow，并在其余部分使用Javascript投影（IE / Opera）。

Answer 3

如果宽度是固定的，我不会使用我喜欢的包装器：

<div class="box-header">
</div>
<div class="middle">
my content
</div>
<div class="box-footer">
</div>

对于top和bottom类，我将顶部和底部阴影作为css背景图像。

然后我repeat-y一个背景图片，表示盒子两边的阴影。

如果您不关心跨浏览器兼容性，请使用CSS3属性。