最好的方式来应用阴影每一边的包装

我想这是一个非常典型的设计，有一个全屏幕背景图像和一个白色背景的内容的居中包装。这个白色包装的左边和右边有一个几个像素宽的整齐阴影。类似于this site。最好的方式来应用阴影每一边的包装

达到此目的的最佳方法是什么？背景图像（如果是这样，在什么以及如何？）或边框，还有其他的东西？任何帮助赞赏。

编辑：我需要这个在IE7上支持。

2012-07-24 Francesca

谷歌盒阴影你会得到你的答案。 – SVS 2012-07-24 10:10:34

对于支持回IE7我推荐使用的图像。您的图像将放置在身体标记对齐的顶部/中心，并在Y轴上重复。图像本身的高度只有一个像素，并且需要用于设计。任何有能力使用Photoshop的人都可以为您创建。

2012-07-24 10:34:15

）谢谢，这是我正在考虑的方式，但如果站点响应，因为背景图像必须是固定宽度，这会让人感到难过。哦，我可以试着用IE3的filter/hack来代替CSS3。希望IE会死的！ – Francesca 2012-07-24 14:02:04

很酷。在手机屏幕等小型设备上查看网站时，这并不是什么大问题。您可以通过媒体查询隐藏BG图像。投影效果很好，在较大的屏幕上有很好的宽度（白色空间），但在较小的屏幕上，实际上没有任何宽度（空白区域），我认为它可能没有问题它:) – 2012-07-24 14:32:29

你可以用CSS3 box-shadow属性来做到这一点。

#wrapper { 
    box-shadow: 0 0 10px #000; 
    border:1px solid #000; 
}

所有现代浏览器都支持这个功能，但如果你需要支持IE < 9，你需要使用图片或外部库如PIE。浏览器的兼容性

2012-07-24 10:11:31 Simone

这会支持IE7和FF3.0吗？ – Francesca 2012-07-24 10:13:04

没有。 FF自3.5开始支持它（前缀为-moz- – Simone 2012-07-24 10:17:42

回答