框影IE8不工作于IE8

Question

我看了所有相关的话题，但没有找到解决办法，所以我提出了这个问题。我试图在IE8上实现框影，但它不起作用。它在IE9+上工作吗？

我有一个简单的div：

<span id="controls" class="box-shadow"> 
<input id="start" type="text" placeholder="Get Directions: Enter Address or Postcode"/> 
<input id="end" type="hidden" value="Text" /> 
</span>

和CSS：

#controls.box-shadow{
background-color: white;
font-size: 13px;
position: relative;
padding: 5px;
z-index: 10000;
float: right;
height: 35px;
width: 96%;
margin-left: 20px;

}
.box-shadow{
box-shadow: 0px 0px 15px 0px #232361;
-moz-box-shadow: 0px 0px 15px 0px #232361;
-webkit-box-shadow: 0px 0px 15px 0px #232361;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#232361')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#232361');
}
#start{ width:82%; height:27px; border:none; padding:5px}

Answer 1

框影在IE8中本机不起作用，但您可以为CSS3使用多填充。

下面是一个有用的示例：http://css3pie.com/

您需要对元素应用如下所示的多边形填充

.box-shadow {
     box-shadow: 0px 0px 15px 0px #232361;
     -moz-box-shadow: 0px 0px 15px 0px #232361;
     -webkit-box-shadow: 0px 0px 15px 0px #232361;
    behavior: url(PIE.htc);
}

Answer 2

CSS3 box-shadow在IE8或更低版本中不受支持。我个人不会担心IE8支持，但如果需要的话，那么MS有一个DropShadow，从IE5.5开始就已经存在了。

箱形阴影支撑

垂影

Answer 3

如果你不想使用任何第三方插件，你可以参考这个网站：

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