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