兼容ie6、7的阴影效果

来源：http://www.zhangxinxu.com/wordpress/2010/04/css%E5%AE%9E%E7%8E%B0%E8%B7%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7%E7%9A%84%E7%9B%92%E9%98%B4%E5%BD%B1%E6%95%88%E6%9E%9C/


兼容ie6、7的阴影效果

<style type="text/css">
.box{
  position:relative;
  width:500px;
  height:500px;
}

.inf{
  width:500px;
  height:500px;
  position:absolute;
  left:0px;
  top:0px;
  z-index:2;
}
.shadow {
	width:500px;
	height:500px;
	border:1px solid #000;
	background:#fff;  /****如果不写背景是白色的话， 在ie6、7中，上边和左边会有内阴影*****/
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

</style>
<h1>此方法中的阴影是用的定位，如果不用定位的话， 阴影框里的汉字也会有阴影</h1>
<div class="box">
  <div class="shadow"></div>
  <div class="inf">013年4月21日在中央电视台梅地亚中心召开第三届媒体信息化高峰论坛暨2013北京国际商品交易博览会新闻发布会，工信部信息化联盟和中国国际经济技术合作促进会国际媒体交流中心联合... 013年4月21日在中央电视台梅地亚中心召开第三届媒体信息化高峰论坛暨2013北京国际商品交易博览会新闻发布会，工信部信息化联盟和中国国际经济技术合作促进会国际媒体交流中心联合... 013年4月21日在中央电视台梅地亚中心召开第三届媒体信息化高峰论坛暨2013北京国际商品交易博览会新闻发布会，工信部信息化联盟和中国国际经济技术合作促进会国际媒体交流中心联合... 013年4月21日在中央电视台梅地亚中心召开第三届媒体信息化高峰论坛暨2013北京国际商品交易博览会新闻发布会，工信部信息化联盟和中国国际经济技术合作促进会国际媒体交流中心联合... </div>
</div>

谷歌




火狐




ie6




ie7