Question

我正在开发一个使用CSS3的阴影的项目。 Drop Shadow也应用于具有alpha像素的Image。它在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>

在firefox中应用像CSS3效果一样的drop-shadow

1 个答案: