Windows上CSSbackdrop-filter标签模糊效果无法正确模糊边缘（macOS上可以正常工作）

这是由于 Windows 的 GPU 加速问题导致的，需要添加以下代码解决：

.backdrop { -webkit-backdrop-filter: blur(5px); /* Chrome, Safari 6.0+ / backdrop-filter: blur(5px); / Chrome 76+, Opera 63+ / background-color: rgba(255, 255, 255, 0.5); / fallback / -webkit-mask-image: -webkit-radial-gradient(circle, white, black); / Safari 14+ / mask-image: radial-gradient(circle, white, black); / Firefox 79+, Safari 14+ */ }

.backdrop::before { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background-color: inherit; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: inherit; z-index: -1; }

使用 ::before 伪元素创建背景层并对其应用 backdrop-filter，最后将原始元素设置为 inherit。这样就可以在 Windows 上正确显示 CSS backdrop-filter 模糊效果了。