-webkit-过滤：下拉阴影为其他浏览器

我有我使用了下面的CSS应用阴影效果：-webkit-过滤：下拉阴影为其他浏览器

-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

来源

2014-01-15 Pete

这是一个WebKit的唯一属性，所以没有等价物。来源：https：//developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility – donnywals

@ donnywals有一个svg过滤器等效于歌剧和firefox，但没有为例如 – Pete

跨浏览器答案给出这个相关的问题： http://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css – psdie

好，我已经想通了这一点 - 相当于歌剧， Firefox是：

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

哪里落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所以目前还没有一个equivelant

我会离开这个开放的，任何人的情况下计算出如何做IE这样的效果

UPDATE

感谢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')";

来源

2014-01-15 10:19:03 Pete

看起来像Firefox现在支持未加前缀的dropshadow过滤器。
证实FF 43.0.4关于OS X MDN文件： filter - CSS - MDN

来源

2016-02-05 19:06:41

-webkit-过滤：下拉阴影为其他浏览器

回答

相关问题