将阴影应用于包装器的每一侧的最佳方法

Question

我猜这是一个非常典型的设计，有一个全屏背景图像，以及一个带有白色背景的内容的居中包装。这个白色包装的左右边缘有一个几像素宽的整洁阴影。与this site类似。

实现这一目标的最佳方法是什么？背景图片（如果是这样，关于什么和如何？）或边框，还有什么？任何帮助表示赞赏。

编辑：我需要在IE7上支持此功能。

Answer 1

您可以使用CSS3 box-shadow属性执行此操作。

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

所有现代浏览器都支持此功能，但如果您需要支持IE＆lt; 9，您需要使用图像或外部库，例如PIE。

有关浏览器兼容性的更多信息：http://caniuse.com/#search=box-shadow

Answer 2

为了支持回IE7，我建议使用图像。您的图像将放置在与顶部/中心对齐的身体标签上，并在Y轴上重复。图像本身的高度为一个像素，并且需要与您的设计一样宽。任何对photoshop有能力的人都可以为你创造这个。