Question

我使用了box-shadow css，但它在IE8中不起作用。有一个代码作为filter：progid ...但是如何从rgba转换我的阴影样式？这是我的代码;

   -webkit-box-shadow: 0px 0px 5px 2px rgba(217,217,217,1);
   -moz-box-shadow: 0px 0px 5px 2px rgba(217,217,217,1);
    box-shadow: 0px 0px 5px 2px rgba(217,217,217,1);

Answer 1

在Internet Explorer上试试这个..

.box-shadow {
  -moz-box-shadow: 0 5px 10px #ccc;
  -webkit-box-shadow: 0 5px 10px #ccc;
  box-shadow: 0 5px 10px #ccc;
  zoom: 1;
  filter:
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=1),
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=45,strength=1),
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=2),
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=135,strength=3),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=10),
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=225,strength=3),
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=2),
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=315,strength=1);

}
body:last-child .box-shadow {
  /* Remove filter from IE9 */
  filter: none;
}

.demo {
  background: #fff;
  border: solid 1px #ccc;
  color: #555;
  font: 83%/130% arial;
  margin: 20px;      
  padding: 20px;
}    


 <div class="demo box-shadow">
  Lorem ipsum dolor sit amet, consectetur adipisicing
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mi
  quis nostrud exercitation ullamco laboris nisi ut aliquip 
  </div>

试试 FIDDLE

Answer 2

此网址将帮助您降低版本

http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

Answer 3

尝试使用css3pie.com htc文件，使IE8支持一些新的CSS3属性，如盒子阴影，圆角等......

我使用box-shadow css但它在IE8中不起作用

3 个答案: