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

Question

我想这是一个非常典型的设计，有一个全屏背景图像，以及一个居中的白色背景内容包装器。这个白色包装纸的左右边缘有一个几个像素宽的整齐阴影。类似于这个网站。

实现这一目标的最佳方法是什么？背景图像（如果是这样，在什么以及如何？）或边框，其他什么？任何帮助表示赞赏。

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

Answer 1

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

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

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

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

Answer 2

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