可以为盒子反射添加模糊吗？

Question

我很好奇这是否可能。我正在制作一支笔，目前正在使用 100 个 div 来复制其他 100 个 div 的反射。如果我可以为实际的盒子反射添加模糊，那么我可以减轻额外 100 个 div 扮演反射角色的情况。

我希望这是有道理的。 这里是CodePen，在桌面上的Chrome中查看以获得最佳结果。不支持火狐浏览器。

 -webkit-box-reflect: below -38px linear-gradient(0deg, rgba(
          255,
          255,
          255,
          0.5
        )
        0%, rgba(255, 255, 255, 0) 70%);

Answer 1

我试图重现这种效果并弄清楚了。关键是创建一个伪元素（::after）并将其放置在阴影的正上方。然后将背景过滤器：模糊（Ypx）应用于::after。