玻璃拟态 | wjs-css-effects

玻璃拟态卡片

背景透过半透明卡片呈现毛玻璃质感，背后色彩被模糊柔化。

关键点

玻璃拟态核心是 backdrop-filter: blur()，模糊元素背后的内容形成毛玻璃质感
必须配合半透明背景（如 rgba(255,255,255,0.15)），既能透出底色又保持内容可读
加一层细边框（rgba(255,255,255,0.3)）模拟玻璃边缘的高光反射
背景需要有丰富的色彩或图案，否则模糊效果不明显，失去玻璃拟态的意义
注意兼容性：Safari 需加 -webkit-backdrop-filter 前缀，低版本浏览器不支持

效果说明

Glassmorphism 玻璃拟态效果。核心是 backdrop-filter: blur() 模糊卡片背后的内容，配合半透明背景 (rgba(255,255,255,.15)) 与细高光边框，营造毛玻璃质感。背景必须有色彩/图案，否则看不到模糊效果。常用于弹窗、卡片、导航栏，是近年流行的视觉风格。