小编use*_*096的帖子

我正在努力在尽可能多的平台上制作带有阴影的 SVG 图标。

我为此使用了以下简单的 CSS：

.test{
  width: 14px;
  height: 14px;
  background-image: url("../images/test.svg");
  background-repeat: no-repeat;
  opacity: 0.8;
  -webkit-filter: drop-shadow(1px 1px 0px #E0E0E0);
}

在 Chrome、Firefox 和 IE 等桌面浏览器上运行良好。但是在移动浏览器上，问题开始了：在 Chrome 中，图标变得模糊，而在 Firefox 中，阴影被忽略了。删除阴影时，Chrome 中的图标将再次清晰，因此我认为它与阴影有一些共同之处。

任何人都遇到了同样的问题，并找到了解决方案？