磨砂效果需 backdrop-blur、半透明背景和 backdrop-saturate 三者协同：单独 backdrop-saturate-150 仅增艳不模糊，无通透感；正确组合为 backdrop-blur-md backdrop-saturate-125 bg-white/10，且须配置 tailwind.config.js 并加 -webkit-backdrop-filter 兼容 Safari。
单独加 backdrop-saturate 不会产生磨砂效果，它只是调色，不是模糊——必须和 backdrop-blur + 半透明背景一起用才成立。
为什么 backdrop-saturate-150 单独写没“毛玻璃感”
backdrop-saturate 本身不模糊、不透明，只调整背后内容的色彩饱和度。你看到的“磨砂感”，其实是三者共同作用的结果：模糊让细节失焦，半透背景提供通透基底，饱和度微调则让颜色更温润、避免灰白发冷。
- 单独写
backdrop-saturate-150：背后图片会变艳，但边缘锐利、无通透感，不是磨砂 - 正确组合是：
backdrop-blur-md backdrop-saturate-125 bg-white/10 - 饱和度值建议控制在
110–130之间：超过150容易发荧光，低于100则偏灰闷
tailwind.config.js 必须同时配置 backdropBlur 和 backdropSaturate
Tailwind 默认不包含 backdrop-saturate 工具类，且它和 backdropBlur 是两个独立配置项——漏掉任一，组合就失效。
- 在
theme.extend下同时添加两者，backdropSaturate值只能是数字（代表百分比），不能带%符号 - 示例配置：
@config
theme: {
extend: {
backdropBlur: {
sm: '4px',
md: '8px',
lg: '12px',
},
backdropSaturate: {
110: '110',
125: '125',
130: '130',
}
}
}
- 改完后必须清缓存并重构建（如
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch） - 验证方式：搜索生成的 CSS 文件中是否有
backdrop-filter: blur(8px) saturate(1.25)
Safari 兼容性问题：-webkit-backdrop-filter 不能省
即使 Tailwind 配置正确、类名也写了，Safari ≤16.6 仍会完全不渲染——因为它只认 -webkit-backdrop-filter。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥做法是定义自定义工具类，同时覆盖标准属性和 WebKit 前缀：
@layer utilities {
.glass-sidebar {
@apply bg-white/10 backdrop-blur-md backdrop-saturate-125;
-webkit-backdrop-filter: blur(8px) saturate(1.25);
}
}
- 注意：WebKit 前缀里的数值必须和 Tailwind 的类名严格对齐，否则 Safari 会回退到未模糊的原始背景
- 别用内联
style覆盖，容易和类名冲突；优先走@apply+ 自定义类
侧边栏滚动时模糊突然消失？大概率是渲染上下文被破坏
这不是代码错，而是浏览器渲染层被意外隔离。常见触发点包括 transform、opacity、overflow: hidden 等。
- 避免给侧边栏加
transform: translateX(0)或opacity-95这类属性 - 父容器别设
overflow: hidden，否则裁掉 backdrop 区域，模糊直接失效；可改用mask或伪元素绕过 - 深色模式下，
bg-white/10在暗背景下会过亮，建议换成dark:bg-gray-900/30 - 微信 X5 内核完全不支持
backdrop-filter，需降级 fallback，例如bg-black/5 blur-sm（作用于自身）
真正难调的不是参数值，而是确保背后有内容、层级没被截断、WebKit 前缀没漏——这三处任意一处出问题，整个磨砂效果就归零。
