3

我使用以下 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 箭头部分周围应用阴影效果

小提琴

4

2 回答 2

6

好的，我已经想通了——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 找到这篇文章

IE版本：

-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#444')";
于 2014-01-15T10:19:03.253 回答
2

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

于 2016-02-05T19:06:41.730 回答