CSS3页面阴影

Question

我想创建一个左右阴影的内容包装器,而不是底部阴影.这就是我想要的:http://community.mybb.com/注意阴影(尽管这使用的是图像,而不是css).

用CSS做到这一点最好的方法是什么？

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;
}

或者你可以单独设置border属性,它不会给你很好的模糊阴影外观.

在IE9以下支持可能很难,你可能还需要投入一些图片.旧的A List Apart文章解释了如何做到这一点,但它并不漂亮.

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