这个滤镜发生了什么:与firefox相比，chrome和safari中的阴影/平移效果

Question

基本上，我的网站上有一些图像作为按钮，其中一些具有复杂的透明度，所以当用户悬停在它们上时，阴影效果非常好-这在firefox中非常有效，但。。。在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

我认为这只是-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/

Answer 2

已解决。。。至少对于铬

chrome产生的问题是png的图像裁剪正好在边缘，所以当转换到不同的状态时，chrome会用一大块灰色来显示这一点，但在图像中添加填充，在我的情况下大约是50px，解决了这个问题，甚至允许我有一个初始的阴影，这是按钮突出所需的！我还可以想象，在photoshop中为图像添加相当多的额外透明空间也会产生类似的效果。然而，即使是线性转换，Safari仍然会出现问题，我认为这是浏览器的问题。我甚至不想知道这在IE中是什么样子…

padding: 50px;

Chrome修复高度裁剪的透明图像