CSS3页面阴影

Question

我想创建一个带有左右阴影而不是底部阴影的内容包装器。这差不多就是我要做的事情：http://community.mybb.com/ 注意阴影（尽管这使用了图像，而不是CSS）。

使用CSS最好的方法是什么？

- Spencer

---

使用两种不同的风格。看下面的例子。 - Kirk

Answer 1

你最好使用图片以兼容旧浏览器。对于CSS，你需要使用box-shadow，但是IE9是第一个支持box-shadow的IE版本。

话虽如此，如果你想使用CSS，你需要使用两个box-shadow属性。你需要做两个。

请参考http://css-tricks.com/snippets/css/css-box-shadow/和http://css3generator.com/的生成器。

以下是大致的操作步骤：

<div id="leftBorder">
  <div id="rightBorder">
    <div id="content">Content here</div>
  </div>
</div>

#leftBorder {
-webkit-box-shadow: -10px 0px 5px 0px #999999;
-moz-box-shadow: -10px 0px 5px 0px #999999;
box-shadow: -10px 0px 5px 0px #999999;
}
#rightBorder {
-webkit-box-shadow: 10px 0px 5px 0px #999999;
-moz-box-shadow: 10px 0px 5px 0px #999999;
box-shadow: 10px 0px 5px 0px #999999;
}

如果你只设置边框属性可能无法获得好看的模糊阴影效果。

在IE9以下版本中可能难以支持，你可能需要添加一些图片。早期的A List Apart文章解释了如何实现，但不是很美观。

http://www.alistapart.com/articles/cssdrop2/

- Kirk