CSS生成跨浏览器的阴影效果

阴影效果是web开发中一个头疼的问题，我做过各种各样的阴影效果，大部分都是用图片生成的，很难定位。现在找到了一种简单的用CSS生成阴影的方法，大家看看下面的例子：

Html代码  
<style type="text/css">  
                  
            div.shadows {   
                margin: 3em auto;   
                width: 25em;   
                font-size: 1.2em;   
                padding: 1em;   
                background: #fff;   
                border: 1px solid #ccc;   
            }   
               
            div.shadows p {   
                margin: 0;   
                font: 100% Helvetica, Arial, sans-serif;   
            }   
           
            div.shadows {   
                -moz-box-shadow: 2px 2px 10px #000;   
                -webkit-box-shadow: 2px 2px 10px #000;   
            }   
           
        </style>     
           
           
        <!--[if IE]>  
            <style type="text/css">  
                div.shadows {   
                    -ms-filter: "progidXImageTransform.Microsoft.Glow(color=#666666,strength=3)   
progidXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6)";   
                    filter: progidXImageTransform.Microsoft.Glow(color=#666666,strength=3)   
progidXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6);   
                }   
            </style>  
        < ![endif]-->  
  
  
  
  
        <div class="shadows">  
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
        </div>  

<style type="text/css">
                               
                        div.shadows {
                                margin: 3em auto;
                                width: 25em;
                                font-size: 1.2em;
                                padding: 1em;
                                background: #fff;
                                border: 1px solid #ccc;
                        }
                       
                        div.shadows p {
                                margin: 0;
                                font: 100% Helvetica, Arial, sans-serif;
                        }
               
                        div.shadows {
                                -moz-box-shadow: 2px 2px 10px #000;
                                -webkit-box-shadow: 2px 2px 10px #000;
                        }
               
                </style>       
               
               
                <!--[if IE]>
                        <style type="text/css">
                                div.shadows {
                                        -ms-filter: "progidXImageTransform.Microsoft.Glow(color=#666666,strength=3)
progidXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6)";
                                        filter: progidXImageTransform.Microsoft.Glow(color=#666666,strength=3)
progidXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6);
                                }
                        </style>
                < ![endif]-->




                <div class="shadows">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>




通过几个CSS语句的使用，轻松就实现了阴影效果。
最最重要的是，支持所有的主流浏览器，尤其是IE6，这个可就真的太难得了。


效果请看这里

效果蛮不错的，谢谢楼主的分享

不支持ie8

ccyingfu 写道
不支持ie8

我用IE8打开，没有问题，有阴影的。

< ![endif]-->  IE8里面出现了这句话...
效果是没问题，但是有代码解析有问题

不错！IE6、8和chrome下测试了没问题，其他的没试（机器上没装）。

happysoul 写道
< ![endif]-->  IE8里面出现了这句话...
效果是没问题，但是有代码解析有问题


多谢提醒，我已经修正了，现在ie下没有< ![endif]--> 了。

FF 3.0.18 也就是ubuntu上的FF 没有效果～

ie < 7 用 filter
其他 css text-shadow

看上去很不错，但是现在还用不着，放着先。。。