html - 为什么 box-shadow 看起来与过滤器 : drop-shadow 不同

Question

从那以后我一直在使用 CSS box-shadows，但现在我有一个带有圆 Angular 的图像并想给它一个圆 Angular 阴影。所以我尝试使用 filter: drop-shadow，但不幸的是它看起来与 box-shadow 不同。在我看来，它们应该看起来一样，我做错了什么吗？

td {
  padding: .5em 3em;
}
.box-shadow img {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.drop-shadow img {
   filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
}

<table>
  <tr>
    <th>box shadow</th><th>drop shadow</th>
  </tr>
  <tr>
    <td class="box-shadow">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=150&h=150" alt="" />
    </td>
    <td class="drop-shadow">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=150&h=150" alt="" />
    </td>
  </tr>
</table>

是否在任何规范中定义了这些阴影的外观，或者浏览器是否只是他们认为应该做的？为什么它们看起来不一样？

Chrome/OS X:

火狐/OS X:

Answer 1

我认为这是一个错误。 W3C specification for CSS filters指出“值被解释为 box-shadow [CSS3BG]。”因此，预计这两个属性会产生类似的结果。

我遇到了类似的问题，如下所示:

#box1, #box2 {
  position: absolute;
  top: 10px;
  width: 100px;
  height: 100px;
  background: red;
}

#box1 { /* Using drop shadow, should appear identical to box shadow */
  left: 10px;
  filter: drop-shadow(0 5px 10px black)
}

#box2 {
  left: 120px;
  box-shadow: 0 5px 10px black;
}

<div id="box1"></div>
<div id="box2"></div>

这将在 Chrome 和 Firefox 中显示不正确，如下所示:

但是，它会像这样在 Safari 中正确显示:

如果我将 Chrome 中的阴影模糊半径减少两倍，我会得到预期的结果:

我已经为 Chromium 提交了错误报告和 Firefox .

更新:2017 年 1 月 12 日

事实证明这不是错误，而是规范的问题。

For a box shadow the blur value is generated by applying to the shadow a Gaussian blur with a standard deviation equal to half the blur radius. - Robert Longson

已提出规范问题here .