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现在支持非前缀的Drophadow过滤器。
在OS X上的FF 43.0.4中确认 MDN文档： filter - CSS - MDN

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

2 个答案: