Glassmorphism 是一份面向 Web 与 App 的磨砂玻璃视觉风格实现指南，属于设计类技能的子参考，用于用户提出磨砂玻璃效果、模糊背景、透明面板或类 macOS 精致界面需求时的实现参考。
用途：在界面中实现“透过磨砂窗看背景”的玻璃质感。触发场景包括毛玻璃面板、半透明卡片、背景模糊、透明层级叠加等。
核心原则：以背景模糊（backdrop filter）为定义性特征；面板使用 rgba() 半透明白色或深色背景；1px 半透明白色边框模拟玻璃边缘受光；配合柔和投影使玻璃面板与背景分离。
视觉要素：需要鲜艳或有纹理的背景（渐变、抽象网格或照片）才能显效；字体使用干净几何无衬线体，文字用纯白或纯黑以保证对比度；避免在纯白或纯黑背景上使用，否则效果不可见。
使用方式（按平台）：
- Web：核心是 backdrop-filter: blur()，配合 -webkit- 前缀，示例使用 rgba(255,255,255,0.15) 或 rgba(0,0,0,0.25) 面板、1px rgba(255,255,255,0.3) 边框、border-radius: 16px 与柔和 box-shadow。
- SwiftUI：使用 .ultraThinMaterial/.thinMaterial/.regularMaterial/.thickMaterial 等内置材质，并以 overlay 的 RoundedRectangle 描边模拟高光边缘。
- Flutter：使用 BackdropFilter 搭配 ImageFilter.blur(sigmaX/sigmaY 约 10–20)，务必包裹在 ClipRRect 中裁剪，否则模糊会作用于整屏；容器透明度约 0.1–0.2。
- React Native：需安装 @react-native-community/blur，用 BlurView 并设置 blurType 与 blurAmount，父容器设 overflow: 'hidden' 与圆角以裁剪模糊；Android 上性能表现不一，需充分测试。
- Jetpack Compose：原生缺少真正的背景滤镜，使用 Modifier.blur()（API 31+）或半透明卡片加边框模拟；也可使用 haze 库实现，但需查阅所选版本文档确认 API。不支持的设备应回退为不透明或着色表面。
适用场景：需要强调背景视觉的卡片、弹窗、导航栏、悬浮面板等。限制：文本与模糊背景需保持足够对比度，可访问性是该风格常见难点；不支持模糊的平台需降级方案；本资料为样式参考，不替代环境验证、可访问性测试与专家评审，对比度与响应式行为需另行验证。