在web页面的ui设计中，投影效果可以说是非常常见的一种表现效果了，然而，在CSS2的时代，我们多半使用图片实现类似效果，或是使用CSS其他属性模拟阴影效果（例如下图就是开心网的注册会员头像阴影效果截图），但是，现在，CSS3的崛起使得这个问题已经不再是是个问题了，深圳网站设计总结了实现不同浏览器兼容CSS阴影效果的技术方法。
 
　　标准方法
 
　　标准方法当然就是指使用CSS3的方法了，这个应该不少同行应该知道，参见如下代码：
　　.shadow {
　　-moz-box-shadow: 3px 3px 4px #000;
　　-webkit-box-shadow: 3px 3px 4px #000;
　　box-shadow: 3px 3px 4px #000;
　　}
　　释义为：横向偏移3像素，纵向偏移3像素，模糊4像素，颜色为纯黑。如果我们把含上面样式的这个class shadow应用到图片上，就会产生出效果。
 
　　IE浏览器
 
　　对于目前对CSS3支持如狗屎的孤芳自赏的IE浏览器怎么办呢？box-shadow属性对于IE浏览器就像是圣诞树上的彩灯——装饰而已。
　　好在IE浏览器有个IE shadow滤镜，是IE浏览器私有的一个东西，可以模拟还凑合的盒阴影效果，使用类似于下面的代码：
　　.shadow {
　　/* For IE 8 */
　　-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
　　/* For IE 5.5 - 7 */
　　filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
　　}
 
　　将shadow这个class应用到图片上即可，虽然效果不及Firefox，chrome等现代浏览器，但是还能凑合着用用。
 
　　样式综合代码：
 
　　.shadow {
　　-moz-box-shadow: 3px 3px 4px #000;
　　-webkit-box-shadow: 3px 3px 4px #000;
　　box-shadow: 3px 3px 4px #000;
　　/* For IE 8 */
　　-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
　　/* For IE 5.5 - 7 */
　　filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
　　}
　　
　　如果您还有关于CSS阴影效果问题、或者网站设计中遇到的浏览器兼容问题，您可以与专注于深圳网站设计的喜唯美网络科技交流！