CSS3 里使用 box-shadow 属性定义块的阴影，基本语法如下：
box-shadow: 3px 3px 4px #000;
上面的样式里，前面两个 “3px” 表示阴影在 xy 两个坐标轴上的偏移量，x轴的正方向向右，y轴正方向向下。这个坐标和我们平时用的有点出入。在 Firefox 和 Webkit 等浏览器里，为了达到最高效率，建议通过私有的 hack 实现 CSS 阴影，可以这样写
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
CSS 阴影在 IE 浏览器里的实现
在 IE 里，我们只能通过滤镜才能实现纯 CSS 的阴影。要实现和上面的样式一样的效果，可以这样写：
/* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
在 IE 的 shadow 滤镜里， Strength 表示阴影的浓度， Direction 表示阴影的角度，为了方便理解，我们可以理解为光线从极坐标 135° 的方向照下来，产生阴影。
整合代码
整合同一个效果的 hack 时，我们遵循按兼容性从强到差的顺序进行整合，也就是标准代码写在最前。
box-shadow: 3px 3px 4px #000;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
看个效果：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>CSS test</title> 5 <style type="text/css"> 6 body 7 { 8 margin: 0; /*背景图片固定居中 9 http://www.w3school.com.cn/css/pr_background-position.asp 10 http://www.198484.com/?action=show&id=51 11 */ 12 background-image: url('images/bg1.jpg'); 13 background-attachment: fixed; 14 background-position: center; 15 background-repeat: no-repeat; 16 } 17 #header 18 { 19 } 20 #inner-header 21 { 22 margin: 0 auto; 23 width: 960px; 24 background-color: Gray; 25 height: 80px; /*布局块阴影，如果不想支持低版本IE可去掉滤镜 26 http://blog.imbolo.com/cross-browsers-css-shadow/ 27 */ 28 box-shadow: 3px 3px 4px #000; 29 -moz-box-shadow: 3px 3px 4px #000; 30 -webkit-box-shadow: 3px 3px 4px #000; 31 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 32 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 33 } 34 #main 35 { 36 background-color: Gray; 37 margin: 10 auto; 38 width: 960px; 39 min-height: 500px; 40 height: auto; /* 41 背景半透明 42 http://blog.csdn.net/zenwong/archive/2008/08/29/2846546.aspx 43 */ 44 filter: alpha(opacity=70); /*IE*/ 45 -moz-opacity: 0.7; /*Mozilla*/ 46 opacity: 0.7; /*FF*/ /* 47 圆角效果，不考虑低版本IE 48 http://blog.imbolo.com/creating-rounded-corners-with-css/ 49 */ 50 -moz-border-radius: 20px; 51 -webkit-border-radius: 20px; 52 border-radius: 20px; 53 } 54 #footer 55 { 56 margin: 0 auto; 57 width: 960px; 58 height: 100px; /*渐变效果 59 http://www.zhangxinxu.com/wordpress/?p=743 60 */ 61 filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); 62 -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); /*IE8*/ 63 background-color: Gray; /* 一些不支持背景渐变的浏览器 */ 64 background: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 65 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); 66 background: -o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 67 } 68 </style> 69 <!--[if IE]> 70 <style type="text/css"> 71 #main 72 { 73 height: 500px; 74 } 75 body 76 { 77 text-align:center; 78 } 79 #inner-header 80 { 81 text-align:left; 82 } 83 </style> 84 <![endif]--> 85 </head> 86 <body> 87 <div id="header"> 88 <div id="inner-header"> 89 <h1> 90 CSS Demo</h1> 91 </div> 92 </div> 93 <div id="main"> 94 </div> 95 <div id="footer"> 96 </div> 97 </body> 98 </html>