毛玻璃效果需 backdrop-filter 与 rgba 背景协同，兼容 safari 须加 -webkit 前缀并设父级真实背景；sass 混合宏应参数化模糊值和透明度，降级时用 @supports 启用纯色+噪点/阴影方案。
background-blur 不能只靠 backdrop-filter 就完事
直接写 backdrop-filter: blur(10px) 看似能出毛玻璃效果，但实际会立刻暴露两个问题：一是老版本 Safari（iOS 15.4 之前、macOS Monterey 之前）完全不支持；二是即使支持，若父容器没内容或没设置 background-color，模糊区域会透出页面根背景（比如白底），失去“卡片悬浮感”。必须配合半透明白色/浅灰背景和明确的层级控制。
- 永远给毛玻璃容器加一层
background-color: rgba(255, 255, 255, 0.7)（透明度按需调整），不能依赖模糊本身“造”背景 - 确保该容器的父元素有真实背景（如
body { background: url(...) }或渐变），否则模糊无源可滤 - 在 Safari 中测试时，打开「开发者 → 重新加载并忽略缓存」，避免因 CSS 缓存误判兼容性
Sass 混合宏里别硬编码 blur() 值
把模糊强度写死成 blur(12px) 会导致组件复用性极差——标题区可能需要弱模糊（6px），模态框主体可能要强一点（16px），而深色主题下还可能得降为 4px 防失真。Sass 的价值在于用参数解耦视觉变量。
- 定义混合宏时，第一个参数必须是
$blur，类型为length，默认值设为10px - 第二个参数
$bg-alpha控制背景透明度，默认0.8，类型为number（非百分比） - 务必补上
-webkit-backdrop-filter前缀，Safari 15.4+ 才支持无前缀版本，但旧版仍需兼容
@mixin glass-card($blur: 10px, $bg-alpha: 0.8) {
background-color: rgba(255, 255, 255, $bg-alpha);
-webkit-backdrop-filter: blur($blur);
backdrop-filter: blur($blur);
// 防止 iOS 上滚动时模糊失效
-webkit-transform: translateZ(0);
}
透明度与模糊叠加时，rgba() 的 alpha 值不是越小越好
把 $bg-alpha 设成 0.1 看起来更“通透”，但实际会放大背景噪点、文字边缘发虚，尤其在高分辨率屏上。模糊本质是像素混合，过低的背景不透明度会让混合结果失控。
- 浅色主题下推荐范围：0.7–0.9；深色主题下可放宽到 0.6–0.8（因暗色背景本身对比度低）
- 如果内容含纯黑文字，
$bg-alpha 会导致文字灰蒙蒙，阅读体验断崖下跌 - 不要用
opacity替代rgba()的 alpha ——opacity会把子元素也变透明，破坏卡片内按钮、图标等交互元素的清晰度
IE 和部分安卓 WebView 必须降级为纯半透背景
当 backdrop-filter 不可用时，强行保留模糊声明不会报错，但效果直接回退到无模糊的 rgba() 背景。这本身没问题，但用户心理预期是“卡片仍有质感”，所以得主动做视觉补偿。
- 用
@supports not (backdrop-filter: blur(1px))包裹降级样式，避免覆盖现代浏览器逻辑 - 降级方案中，把
background-color改为带细微噪点的radial-gradient或极低透明度的box-shadow: inset，模拟轻微散射感 - 在 Android 4.4–6.0 的 WebView 中，连
rgba()都可能渲染异常，此时建议 fallback 到纯色 + 边框阴影：border: 1px solid rgba(255,255,255,0.2)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
