Glassmorphism 这股风从 macOS Big Sur 吹到现在，热度一点没减。但说实话，很多人写毛玻璃就一句backdrop-filter: blur()完事——出来的效果像蒙了层纱，不是玻璃，是磨砂贴膜。真正好看的毛玻璃，关键不在"模糊多少"，而在底下有什么、边框怎么处理、光怎么打上去。这篇就拆一个我自己常用的毛玻璃卡片方案，纯 HTML + CSS，没有 JS，没有框架。先看效果深紫色渐变背景上，两个模糊色块缓缓漂浮。卡片浮在中间，半透明白底 + 微亮描边，像一块真的玻璃搁在彩色雾气上面。鼠标移上去，卡片微微上浮，头像还会调皮地歪一下。拆解四个关键细节1. 背景不能"干净"毛玻璃底下如果是一片纯色，blur 了也看不出效果。所以我用body::before和body::after放了两个大色块，粉色 + 蓝色，加filter: blur(80px)做成光斑，再让它们用floatBg动画慢慢飘。这样玻璃后面的内容一直在"流动"，通透感就出来了。2. 模糊