玻璃拟态卡片生成 - CSS Glass Card

玻璃拟态（Glassmorphism）是一种流行的UI设计风格，通过半透明背景、背景模糊（backdrop-filter）和细腻的边框来模拟磨砂玻璃的视觉效果。它能让界面元素呈现出轻盈、通透的质感，常用于卡片、导航栏、弹窗等组件。这种风格在2020年后广泛流行，苹果的iOS/macOS系统、微软的Fluent Design都大量运用了类似的设计语言。

玻璃拟态的核心在于backdrop-filter属性，它可以对元素后方的内容应用滤镜效果。常用滤镜函数包括：
• blur() — 模糊效果，值越大越朦胧
• saturate() — 饱和度，增强色彩鲜艳度
• brightness() — 亮度调节
• contrast() — 对比度
配合background: rgba()半透明背景、border浅色边框和box-shadow柔和阴影，构成完整的玻璃拟态效果。注意需要添加-webkit-backdrop-filter以兼容Safari浏览器。

backdrop-filter在主流现代浏览器中均有良好支持：Chrome 76+、Firefox 103+、Safari 9+（需-webkit-前缀）、Edge 79+。移动端iOS Safari 9+和Android Chrome均支持。需要注意的是，在较旧版本的浏览器中（如IE、旧版Firefox），backdrop-filter可能不生效，建议提供降级方案（如增加背景不透明度作为fallback）。本工具生成的CSS已包含-webkit-前缀，确保最大兼容性。

使用backdrop-filter: blur()会触发GPU加速渲染，在大多数现代设备上性能影响微乎其微。但如果页面上有大量（数十个以上）同时应用玻璃拟态效果的元素，可能会在低端设备上造成轻微的性能下降。建议：
• 合理控制使用数量，避免在无限滚动列表中对每个item应用
• 在移动端适当降低模糊值以减少GPU负担
• 使用will-change: transform可提前告知浏览器优化（谨慎使用）

最佳实践：
1. 确保卡片后方有丰富的视觉内容（色彩、图片、渐变等），否则模糊效果不可见
2. 背景透明度建议在0.1-0.3之间，过低效果不明显，过高则失去玻璃通透感
3. 边框使用白色半透明（rgba(255,255,255,0.2~0.5)），模拟玻璃边缘的反光
4. 搭配柔和的盒阴影增强层次感
5. 内部文字保持足够的对比度以确保可读性
6. 在深色背景上使用深色半透明玻璃，在浅色/彩色背景上使用白色半透明玻璃

• 玻璃拟态（Glassmorphism）：半透明背景+背景模糊+浅色边框，强调通透感和层次感，背景内容可见但被柔化
• 毛玻璃（Frosted Glass）：与玻璃拟态类似，但通常模糊更强、透明度更低，更接近真实磨砂玻璃，常用于导航栏
• 新拟态（Neumorphism）：通过柔和的阴影和高光模拟凸起/凹陷效果，元素与背景同色系，无透明度变化，无模糊，强调立体感而非通透感
三者各有适用场景，玻璃拟态适合需要展示背景层次的卡片和弹窗，新拟态适合按钮和表单等交互元素。