为什么 box-shadow 看起来与 filter 不同：drop-shadow

Question

从那以后我一直在使用 CSS box-shadows，但现在我有一个带圆角的图像，想给它一个圆角阴影。所以我尝试使用 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>

这些阴影的外观是在任何规范中定义的，还是浏览器只是他们认为应该做的？为什么那些看起来不同？

铬/OS X：

火狐/OS X：

Answer 1

我相信这是一个错误。CSS 过滤器的W3C 规范声明“值被解释为 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 日

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

对于框阴影，模糊值是通过将标准偏差等于模糊半径一半的高斯模糊应用于阴影来生成的。-罗伯特·朗森

这里提出了一个规范问题。