这个过滤器发生了什么:与firefox相比，chrome和safari中的投影/翻译效果如何？

Question

基本上，我有几个图片作为按钮在我的网站上，其中一些具有复杂的透明度，所以下降阴影是很好的效果时，一个用户盘旋在他们上面-这在火狐工作很好，但.在Chrome中，我遇到了一个奇怪的口吃事件，它似乎承认了图像的实际边界，就像一个框影一样，而在Safari中，我的模糊度出现了奇怪的下降(我认为)。我没有安装IE。这里发生了什么事？这仅仅是对那些浏览器的限制吗？你知道有什么工作吗？

CodePen示例(请在提到的浏览器中进行测试！)

img {
   width: 50%;
   -webkit-filter: drop-shadow(0px 10px 10px #2f4f4f);
   -ms-filter: drop-shadow(0px 10px 10px #2f4f4f);
   -o-filter: drop-shadow(0px 10px 10px #2f4f4f);
   -mos-filter: drop-shadow(0px 10px 10px #2f4f4f);
   filter: drop-shadow(0px 10px 10px #2f4f4f);
   transition: all ease-in-out 300ms;
}

img:hover {
   -webkit-filter: drop-shadow(0px 37px 20px #2f4f4f);
   -ms-filter: drop-shadow(0px 37px 20px #2f4f4f);
   -o-filter: drop-shadow(0px 37px 20px #2f4f4f);
   -mos-filter: drop-shadow(0px 37px 20px #2f4f4f);
   filter: drop-shadow(0px 37px 20px #2f4f4f);
   transform: translate(0px, -10px);
}

Answer 1

SOLVED...At至少适用于铬

从铬产生的问题是，png的图像作物是正确的边缘，所以当转换到一个不同的状态，铬将显示这与一个大块灰色，但添加填充，在我的情况下，大约50 so，解决了这个问题，甚至允许我有一个初始投阴影，这是需要按钮突出！我还可以想象，在photoshop中增加相当多的额外透明空间，也会产生类似的效果。然而Safari仍然口吃，即使是线性过渡，我认为这是一个浏览器问题。我甚至不想知道这在IE里是什么样子..。

padding: 50px;

高裁剪透明图像的铬修复

Answer 2

我相信这只是-webkit过滤器的局限性。我一直有问题，过渡模糊和阴影在CSS，无论浏览器.我唯一真正看到的弥补口吃的办法是将宽松政策设定为线性。这通常会使它平滑(但只是轻微的)。我认为在你的例子中，你最好坚持经典的框影，给你的img一个100%的边界半径。就像这样

img {
  width: 50%;
  border-radius:100%;
  box-shadow:0px 10px 10px;
  transition: all linear 300ms;
}

img:hover {
 box-shadow:0px 10px 40px 20px;
}

示例https://codepen.io/jcoulterdesign/pen/d21ebb198cb67c9de60f05dfe12ff650/