在Firefox中應用像CSS3效果的陰影

我正在使用CSS3的陰影的項目。投影也被應用於具有alpha像素的圖像。它在Chrome中正常工作。 Firefox出現問題。我想要一個替代解決方案。目前，我正在使用SVG渲染類似陰影的效果，但它太沉重，而且還會導致一些問題。我想獲得一些想法，以便在Firefox中實現相同的功能。在Firefox中應用像CSS3效果的陰影

請幫忙。謝謝。

來源

2014-07-09 JayKandari

您在Firefox中面臨的下拉陰影面臨的問題是什麼？你可以在問題中包含示例代碼嗎？ – Harry

例如：嘗試加載這個（http://jsfiddle.net/JayKandari/q83wE）小提琴在Chrome和Firefox分開。它適用於Chrome，但不適用於Firefox。任何替代品。謝謝 – JayKandari

請參閱[本SO線程]（http://stackoverflow.com/questions/16802308/drop-shadow-not-showing-up-in-latest-firefox）。看起來Firefox似乎沒有完全支持CSS過濾器。您還可以在[here]（http://caniuse.com/css-filters）中看到，所有Firefox版本的支持都非常小。因此，您可能不得不使用羅伯特的答案中提到的其他方法。 – Harry

Firefox實現filter effects working draft<feDropShadow>元素。這是優化的，因此它將比將所有單獨的過濾器捆綁在一起更快地工作。

下面的示例顯示了SVG 1.1陰影和新的<feDropShadow>等效項。

<svg viewBox="0 0 800 400" 
    xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <filter id="feDropShadowEquiv1"> 
     <feGaussianBlur stdDeviation="3"/> 
     <feOffset dx="3" dy="3" result="offsetblur"/> 
     <feFlood flood-color="#720"/> 
     <feComposite in2="offsetblur" operator="in"/> 
     <feMerge> 
      <feMergeNode/> 
      <feMergeNode in="SourceGraphic"/> 
     </feMerge> 
    </filter> 
    <filter id="feDropShadow1"> 
     <feDropShadow stdDeviation="3" flood-color="#720"/> 
    </filter> 
    </defs> 
    <g font-family="Verdana" font-size="30"> 
    <text x="100" y="90" filter="url(#feDropShadow1)">feDropShadow</text> 
    <text x="100" y="140" filter="url(#feDropShadowEquiv1)" >feDropShadow</text> 
    </g> 
</svg>

來源

2014-07-09 07:50:03

在Firefox中應用像CSS3效果的陰影

回答

相關問題