玻璃拟态卡片
玻璃拟态（Glassmorphism）：半透明背景 + 背景模糊（backdrop-filter: blur）+ 细边框 + 彩色渐变底，看起来像毛玻璃。这两年从 iOS 风靡到 Web 设计。
要点：backdrop-filter: blur(12px) 是灵魂；背景色用 rgba 半透明；加 1px rgba(255,255,255,.3) 内边框模拟玻璃边缘反光。必须放在彩色或有图案的背景上才有效。
- backdrop-filter: blur(12px) 毛玻璃核心（Safari 需 -webkit- 前缀）
- 背景用 rgba 半透明白/黑，边框 1px 高光
- 底层必须是彩色渐变或图片，否则看不出模糊
HTML
<style> .gBg { padding: 60px 0; text-align: center; background: linear-gradient(135deg,#f778ba,#4a9eff 55%,#57ab5a); } .glass { display: inline-block; width: 300px; padding: 34px 20px; border-radius: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 30px rgba(0,0,0,.15); color: #fff; } .glass h3 { margin: 0 0 8px; } .glass p { margin: 0; font-size: 13px; opacity: .85; } </style> <div class="gBg"><div class="glass"> <h3>玻璃拟态卡片</h3><p>backdrop-filter: blur 毛玻璃效果</p> </div></div>
本节要点玻璃拟态 = backdrop-filter 模糊 + 半透背景 + 高光细边框；底色必须丰富。
