css - 在 Firefox 中应用类似 CSS3 效果的阴影

Question

我正在开发一个使用 CSS3 阴影的元素。投影也应用于具有 alpha 像素的图像。它在 Chrome 中运行良好。 Firefox 出现问题。我想要一个替代解决方案。目前我正在使用 SVG 来渲染像效果一样的投影，但它太重了，而且它会导致一些问题。我想获得一些想法以便在 firefox 中实现相同的功能。

请帮忙。谢谢。

Answer 1

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>