毛玻璃 Glassmorphism

半透明磨砂玻璃质感的卡片：能透出背后内容又带模糊

毛玻璃卡片Glassmorphism

**毛玻璃（Glassmorphism）**由 backdrop-filter: blur 实现：卡片本身半透明，把背后的内容模糊成一片朦胧色块透出来。它从 iOS / Windows Fluent Design 火遍全球，是“轻盈、现代”的代名词。

什么时候用：浮在图片/渐变上的导航栏、通知卡片、视频播放器的控制条——一切“浮层”。前提：背后得有东西可透，纯色背景上毛玻璃等于不存在（只能看到一点点亮边）。

对 AI 说清楚的三要素：① blur 半径 10~20px；② 底色透明度 10%~~20%（太高不透、太低看不清内容）；③ 半透明描边（rgba 白 0.25~~0.35）提供“玻璃边缘”。

卡片使用毛玻璃效果（Glassmorphism）：background rgba(255,255,255,0.14)、
backdrop-filter: blur(14px)、1px 半透明白描边 + 柔和投影，
背后需有彩色内容（渐变/图片）才能显出通透感。