Glassmorphism 這股風從 macOS Big Sur 吹到現在，熱度一點沒減。但說實話，很多人寫毛玻璃就一句backdrop-filter: blur()完事——出來的效果像蒙了層紗，不是玻璃，是磨砂貼膜。真正好看的毛玻璃，關鍵不在"模糊多少"，而在底下有什么、邊框怎么處理、光怎么打上去。這篇就拆一個我自己常用的毛玻璃卡片方案，純 HTML + CSS，沒有 JS，沒有框架。先看效果深紫色漸變背景上，兩個模糊色塊緩緩漂浮。卡片浮在中間，半透明白底 + 微亮描邊，像一塊真的玻璃擱在彩色霧氣上面。鼠標移上去，卡片微微上浮，頭像還會調皮地歪一下。拆解四個關鍵細節1. 背景不能"干凈"毛玻璃底下如果是一片純色，blur 了也看不出效果。所以我用body::before和body::after放了兩個大色塊，粉色 + 藍色，加filter: blur(80px)做成光斑，再讓它們用floatBg動畫慢慢飄。這樣玻璃后面的內容一直在"流動"，通透感就出來了。2. 模糊