-webkit-filter:其他浏览器的阴影 [英] -webkit-filter: drop-shadow for other browsers
问题描述
我有一个阴影效果,我使用下面的CSS应用:
I have a drop shadow effect that I am applying using the following css:
-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
有没有人知道这对于其他浏览器是什么等效的。
Does anyone know what the equivalent for this is for the other browsers.
请注意,我不能使用 box-shadow:0 1px 10px rgba(113,158,206,0.8)
将不会对形状的css箭头部分应用阴影效果
Please note I can't use box-shadow: 0 1px 10px rgba(113,158,206,0.8)
as this won't apply the shadow effect around the css arrow part of the shape
推荐答案
Ok我想出了这一点 - 与opera和firefox的等效是:
Ok I have figured this out - the equivalent for opera and firefox is:
filter: url(drop-shadow.svg#drop-shadow);
其中drop-shadow.svg如下所示:
where drop-shadow.svg looks like this:
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
<feOffset dx="1" dy="4" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.3)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
IE是这样的垃圾不支持svg值feOffset,feFlood或feMerge所以目前不有一个equivelant
IE being so crap doesn't support the svg values feOffset, feFlood or feMerge so doesn't currently have an equivelant
我会离开这个开放的情况下任何人都知道如何做这种效果的IE
I'll leave this open in-case anyone figures out how to do this effect for IE
UPDATE
感谢psdie寻找此帖
IE版本:
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#444')";
这篇关于-webkit-filter:其他浏览器的阴影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!