-webkit-filter:适用于其他浏览器的drop-shadow

Question

我有一个投影效果，我正在应用下面的css：

-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));

有人知道其他浏览器的等价物是什么吗？

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

Fiddle

Answer 1

好的，我已经弄清楚了-- opera和firefox的等价物是：

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

其中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太烂了，不支持SVG值feOffset、feFlood或feMerge，所以目前还没有等价物

我会让它开放，以防有人想出如何在IE中实现此效果

更新

感谢psdie找到了this post

IE版本：

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

Answer 2

看起来Firefox现在支持无前缀的dropshadow滤镜。

在FF 43.0.4 on OS X MDN文档中确认：filter - CSS - MDN