box-shadow兼容ie版本

来源：互联网发布：奥一网网络问政编辑：程序博客网时间：2024/06/10 10:54

很多时候，想ie兼容css3的一些新的属性如box-radius,box-shadow,都会选择用ie-css3.htc,在这里，偶有发现了一个方法

box-shadow{filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/background-color: #eee;-moz-box-shadow:2px 2px 5px #969696;/*firefox*/-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/box-shadow:2px 2px 5px #969696;/*opera或ie9*/}

filter:progid:DXImageTransform.Microsoft.Shadow(color='#969696‘/*颜色数值*/,Direction=135/*阴影角度*/,strength=5；/*阴影半径*/）;

下面是国外的做法：

<!-- Extra white-space below is just to make it easier to read. :-) -->     <!--[if lt IE 7 ]>   <body class="ie6">          <![endif]-->   <!--[if IE 7 ]>      <body class="ie7">          <![endif]-->   <!--[if IE 8 ]>      <body class="ie8">          <![endif]-->   <!--[if IE 9 ]>      <body class="ie9">          <![endif]-->   <!--[if (gt IE 9) ]> <body class="modern">       <![endif]-->   <!--[!(IE)]><!-->    <body class="notIE modern"> <!--<![endif]-->

#box {  /* CSS for all browsers. */  border: solid 1px #808080;  background: #ffffcc;  margin: 10px;  padding: 10px;    /* CSS3 Box-shadow code: */  box-shadow: 5px 5px 0px #ff0000;  -webkit-box-shadow: 5px 5px 0px #ff0000;  -moz-box-shadow: 5px 5px 0px #ff0000;}  /* IE6-8 Specific Code */body.ie6 #box,body.ie7 #box,body.ie8 #box {   zoom: 1;   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);}

0 1