-webkit-filter：其他浏览器的drop-shadow

I have a drop shadow effect that I am applying using the following css:

我有一个投影效果,我正在使用以下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.

有谁知道这对于其他浏览器是等效的。

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

请注意我不能使用box-shadow:0 1px 10px rgba(113,158,206,0.8),因为这不会在形状的css箭头部分周围应用阴影效果

Fiddle

2 个解决方案

#1

Ok I have figured this out - the equivalent for opera and firefox is:

好吧我已经弄明白了 - 相当于opera和firefox是:

filter: url(drop-shadow.svg#drop-shadow);

where drop-shadow.svg looks like this:

其中drop-shadow.svg看起来像这样:

<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 being so crap doesn't support the svg values feOffset, feFlood or feMerge so doesn't currently have an equivelant

IE是如此废话不支持svg值feOffset,feFlood或feMerge所以目前没有一个equivelant

I'll leave this open in-case anyone figures out how to do this effect for IE

如果有人知道如何为IE做这个效果,我将保持开放状态

UPDATE

Thanks to psdie for finding this post

感谢psdie发现这篇文章

IE Version:

-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#444')";

#2

Looks like Firefox now supports the non-prefixed dropshadow filter.
Confirmed in FF 43.0.4 on OS X MDN documentation: filter - CSS - MDN

看起来Firefox现在支持非前缀的Drophadow过滤器。在OS X MDN文档的FF 43.0.4中确认:filter - CSS - MDN

#1