我正在尝试使用下面的代码将阴影应用于图像:reference - https://stackoverflow.com/a/12921987/1124993
.shadowed {
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="1.3"/>
<feOffset dx="4" dy="4" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
<div class="shadowed">
<img src="http://indianartzone.cubereach.com/pub/media/catalog/product/p/o/por003.jpg"
style="width:100%;" /></div>
你可以在这里看到效果 - https://jsfiddle.net/d8wfw8va/15/
我不相信DXImage已经被支持了。见Microsoft Compatibility。
我建议您使用box-shadow而不是Edge支持且不需要前缀。见:qazxsw poi
HTML:
CanIUse - box-shadow
CSS:
<img src="http://indianartzone.cubereach.com/pub/media/catalog/product/p/o/por003.jpg" class="shadow" />