阴影 css 过滤器不适用于 safari 9.1答案

【问题标题】：drop-shadow css filter not working with safari 9.1阴影 css 过滤器不适用于 safari 9.1
【发布时间】：2016-07-23 13:56:27
【问题描述】：

drop-shadow css 过滤器不适用于 safari 9.1，请提出解决此问题的任何可能方法。

我一直在为渲染元素使用一个类，但由于过滤器，元素背景不可见。

.class{
    fill: #7FADC1;
    filter: url(#dropShadow);
    filter: drop-shadow(0 1px 2px #D5D5D5);
}

【问题讨论】：

使用等效的 SVG 过滤器并引用 CSS 中的过滤器
我相信解决方案from this question 可能会更好...

标签： macos filter safari css-filters drop-shadow

【解决方案1】：

我遇到了同样的问题。我这样解决了，FireFox 需要“moz-document url-prefix”。（诀窍以 SVG 过滤器选项结束）。

.class {
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2));
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2));
  -ms-filter: url(#drop-shadow);
  filter: url('#drop-shadow');
}

@-moz-document url-prefix() {
  .class {
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2));
  }
}

您还需要将其包含在 HTML 中（或使用 URL 来引用外部 SVG）。

<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg" style="position: absolute;">
    <defs>
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="10"/>
        <feOffset dx="0" dy="0" result="offsetblur"/>
        <feFlood flood-color="#000000" flood-opacity="0.2"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
          <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    </defs>
</svg>

【讨论】：

OP 询问的是 Safari，而不是 FF
@Rob 是的，这就是为什么我建议的解决方案适用于 Safari 和 Firefox 以及大多数其他浏览器的原因。只是想通过提供一个完整的例子来提供帮助。