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

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

<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: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3) 
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6)";
					filter: progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3) 
progid:DXImageTransform.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，这个可就真的太难得了。


效果请看这里

评论

12 楼 xixian 2010-03-29  

ff不支持。。。。。

11 楼 sidac 2010-03-15  

< ![endif]-->
这个叹号前面有个空格，去掉就不会在页面上显示< ![endif]-->了

IE8.0.7600、IE6.0.3790阴影显示正常

FireFox2.0.0.20、Opera9.21未显示阴影效果，不知道原因

10 楼 murusu 2010-03-15  

IE 6.0.3790.3959
没效果

9 楼 YiSingQ 2010-03-14  

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

8 楼 guoshuang 2010-03-14  

ie < 7 用 filter
其他 css text-shadow

7 楼 Enn 2010-03-13  

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

6 楼 fogtower 2010-03-13  

happysoul 写道

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

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

5 楼 wwww1221 2010-03-12  

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

4 楼 happysoul 2010-03-12  

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

3 楼 fogtower 2010-03-11  

ccyingfu 写道

不支持ie8

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

2 楼 ccyingfu 2010-03-10  

不支持ie8

1 楼 gdipkf1986 2010-03-10  

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