css实现div阴影效果，兼容性较好

阴影效果看起来当然帅，firefox和safari/chrome通过私有属性支持box-shadow属性，box-shadow可以实现阴影效果，但是IE不支持box-shadow属性，却可以通过shadow滤镜来实现阴影效果.

<style type="text/css">
div {
    width:500px; height:500px; margin:0px; background:#FFFFFF;
	/*
	第一个参数是x轴阴影段长度
	第二个参数是y轴阴影段长度
	第三个参数是往四周阴影段长度
	第四个参数是阴影段颜色
	*/
    box-shadow:0px 0px 10px #CCCCCC;
    -moz-box-shadow:0px 0px 10px #CCCCCC;
    -webkit-box-shadow:0px 0px 10px #CCCCCC;
	/*direction 阴影角度 0°为从下往上 顺时针方向 strength 阴影段长度*/
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=0, strength=6)\
                progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=90, strength=6)\
                progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=180, strength=6)\
                progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=270, strength=6)";
    *filter:progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=0, strength=6)
            progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=90, strength=6)
            progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=180, strength=6)
            progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=270, strength=6);
}
</style>
<div>php点点通-www.phpddt.com</div>

效果如下所示：


测试了一下兼容性，发现只在IE6下不兼容，下一讲提出解决方案！