box-shadow css属性，产生阴影效果的有效方法？

Question

我一直在研究网页设计的阴影效果技术。 因此，我想应用这项技术来为我的网站使用顶部标题栏。

从我的发现来看，那里的人使用最多的是box-shadow css属性。 我想知道这是否是达到预期结果的最有效但最简单的方法。任何其他选项可用于实现相同以及它们的优点和缺点？

任何意见将非常感激？

Answer 1

简单的方法是Photoshop的:)

否则，请继续阅读：http://www.css3.info/preview/box-shadow/

box-shadow是CSS3属性，这意味着它不具备的< IE9，而不是在大多数浏览器原生提供，因此专有前缀：

用于IE阴影

示例CSS代码：

filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='120',strength='20'); 

CSS3已经rsion：

element { 
    -moz-box-shadow: 10px 10px 5px #888; 
    -webkit-box-shadow: 10px 10px 5px #888; 
    -o-box-shadow: 10px 10px 5px #888; 
    -khtml-box-shadow: 10px 10px 5px #888; 
    box-shadow: 10px 10px 5px #888; 
} 

Answer 2

CSS3 box-shadow属性的唯一其他选项是使用图像。 CSS3盒子阴影更容易应用，并且需要使用更少的页面重量（kb）。但是，并非所有的浏览器都支持CSS3盒子阴影。

如果使用box-shadow属性确定为不同浏览器设置所有各种属性。

box-shadow: 1px 2px 3px #000; 
-moz-box-shadow: 1px 2px 3px #000; 
-webkit-box-shadow: 1px 2px 3px #000; 
-o-box-shadow: 1px 2px 3px #000; 
-khtml-box-shadow: 1px 2px 3px #000;