html - 这个过滤器 :drop-shadow/translate effect in chrome and safari compared to firefox? 发生了什么

Question

基本上我的网站上有一些图像作为按钮，其中一些具有复杂的透明度，因此当用户将鼠标悬停在它们上方时，投影非常适合产生效果 - 这在 Firefox 中效果很好但是...... 在 Chrome 中，我遇到了一个奇怪的断断续续的事情，它似乎像盒子阴影一样承认图像的实际边界，而在 Safari 中，我得到了模糊的奇怪减少(我认为)。我没有安装IE。 这里发生了什么？这只是那些浏览器的限制吗？您知道有什么变通办法吗？

CodePen Example (please test in those browsers mentioned!)

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-filters 的局限性。无论浏览器如何，我总是在 CSS 中过渡模糊和阴影时遇到问题。我真正见过的唯一能补救口吃的方法是将缓动设置为线性。这通常会使其平滑(但只是轻微的)。我认为在你的情况下你最好坚持使用经典的 box-shadow 并给你的 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/