-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-過濾：下拉陰影爲其他瀏覽器

回答

相關問題