我有这段代码在imagese上投下阴影:

.shadow{
box-shadow: -2px 2px 4px #666;
-webkit-box-shadow: -2px 2px 4px #666;
-moz-box-shadow: -2px 2px 4px #666;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true);
}


此功能可在FF,Opera,Safari,Chrome和IE6中使用,但不适用于IE6(尚未测试任何其他IE版本)

谢谢

更新:

 <img src="......" class="shadow">


未指定宽度或高度...

问题在于阴影很清晰且完全是黑色的,而不是像阴影那样褪色,例如在FF中那样。
很难描述...阴影在那里,但没有褪色,就像图像后面的黑盒子一样。

最佳答案

元素需要具有布局(from MSDN):


  几乎所有对象都可以应用过滤器。但是,应用滤镜的对象必须具有布局,才能显示滤镜效果。简而言之,具有布局意味着对象具有定义的高度和宽度。默认情况下,某些对象(如表单控件)具有布局。所有其他可过滤对象都通过设置height或width属性,将position属性设置为absolute,将WritingMode属性设置为tb-rl或将contentEditable属性设置为true来获得布局。


另请参阅On having layout以获取更多详细信息。

另请注意,filter语法仅在IE6和IE7中有效。 IE8 needs the -ms-filter property instead, and its value should be in quotes

简而言之,要使其在IE6中工作,请添加zoom: 1,并且也要使其在IE8中工作,请添加一个-ms-filter属性(在filter属性之前!):

.shadow {
    box-shadow: -2px 2px 4px #666;
    -webkit-box-shadow: -2px 2px 4px #666;
    -moz-box-shadow: -2px 2px 4px #666;
    -ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true)";
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true);
    zoom: 1;
}

07-24 09:46
查看更多