<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<style type="text/css">
div.shadows {
margin: 3em auto;
width: 25em;
font-size: 1.2em;
padding: 1em;
background: #fff;
border: 1px solid #ccc;
/*
IE不支持box-shadow属性，但是可以通过shadow滤镜来实现阴影效果，IE并没有把文字阴影和盒子阴影区分，元素中的文字会继承元素的阴影
设置，如果你不定义该元素的background和border，就只会出现文字阴影，如果只定义
background属性就只会出现盒子阴影，文字不会出现阴影；如果只定义了border属性则盒子阴影及文字阴影都呈现。
*/ }
div.shadows p {
margin: 0;
font: 100% Helvetica, Arial, sans-serif;
}
div.shadows {
/*适用firefox*/
-moz-box-shadow
: 2px 2px 10px #000;/*-maz-box-shadow:水平方向位移 竖直方向位移 模糊半径 颜色
*/
-webkit-box-shadow:
2px 2px 10px #000;
}
div.shadows {/*适用于ie6
，这里的颜色如把Glow中的color换成#ccc会变成红色，当color为#cccccc时恢复正常，也就是说color后最好接6位数字
*/
-ms-filter:
"progid:DXImageTransform.Microsoft.Glow
(color=#666666,strength=3)
progid:DXImageTransform.Microsoft.Shadow
(color=#000000,direction=135,strength=6)";
/*Glow是指的边缘发光，是四个边的都会发光，但要注意一点就是Glow发出的光会有点马赛克的感觉
（下面有图为证）,Shadow是指的阴影效果，一般是二个边或仅一个边
*/
filter:
progid:DXImageTransform.Microsoft.Glow
(color=#666666,strength=3)
progid:DXImageTransform.Microsoft.Shadow
(color=#000000,direction=135,strength=6);
}
</style>
<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>
</body>
</html>
效果图如下：（这是ie中的效果）
这是firefox中的效果
