Question

我一直在使用CSS盒子阴影，但现在我有一个带圆角的图像，想要给它一个圆形阴影。所以我尝试使用filter：drop-shadow，但不幸的是它看起来与box-shadow不同。在我看来，他们应该看起来一样，我做错了吗？

＆＃13;

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));
}

＆＃13;

<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>

＆＃13;

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

Chrome / OS X：

Firefox / 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日

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

对于方框阴影，通过向阴影应用高斯模糊来生成模糊值，高斯模糊的标准偏差等于模糊半径的一半。 - Robert Longson

已提出规范问题here。

Answer 2

这很可能解释了您所看到的渲染差异。

The big advantage of the drop-shadow filter is that it acknowledges the outline and transparency of an element.

另请注意CSS Drop shadow vs Filter的浏览器支持。

Answer 3

他们不一样。他们实现了不同的目标。

在filter:drop-shadow的情况下，某些浏览器不支持spread的{{1}}值。这就是他们看起来与众不同的原因。它也不支持box-shadow

但作为 inset 的优势，您可以在不规则形状或图像周围生成阴影，而 filter:drop-shadow 会生成矩形阴影。

见下面的例子：

＆＃13;

box-shadows

＆＃13;

.boxShadow,.dropShadow {
  width:100px;
  height:100px;

   background:green;
   position:relative;
   float:left;margin:20px;
  
}
.boxShadow {
     box-shadow: 0 0 10px black;
}
.dropShadow {
 -moz-filter: drop-shadow(0 0 10px black);
  -webkit-filter: drop-shadow(0 0 10px black);
  -o-filter: drop-shadow(0 0 10px black);
  -ms-filter: drop-shadow(0 0 10px black);
  filter: drop-shadow(0 0 10px black);

}
.boxShadow:before,.dropShadow:before {
  position:absolute;
  content:"";
  width: 0; 
  height: 0; 
  right:0;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

＆＃13;

正如您所看到的，<div class="boxShadow"> </div> <div class="dropShadow"> </div> drop-shadow周围也有阴影，而pseudo-element却没有阴影。

在此处查看更多信息＆gt; Comparison drop-shadow vs box-shadow或此处＆gt; Filter CSS

希望有所帮助

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

3 个答案:

更新：2017年1月12日