backdrop-filter 不支持 transition 动画，浏览器直接忽略 transition: backdrop-filter 声明；可靠方案是固定 blur 值 + opacity 过渡，并搭配 transform 触发硬件加速，配合 mask 实现模糊区域渐变效果。
backdrop-filter 本身不支持 transition 动画
直接写 transition: backdrop-filter 0.3s 是无效的——浏览器不会触发任何过渡行为，控制台无报错，但 blur() 值切换永远是跳变。这不是兼容性问题，而是 CSS 规范明确将 backdrop-filter 列为“不可动画属性”。Chrome、Safari、Edge 全部忽略该声明，截至 2026 年 6 月仍无改变。
常见误判：反复检查前缀（-webkit-backdrop-filter）、事件监听（transitionend）、拼写，最后发现根本没走过渡管线。
真正能平滑过渡的只有：opacity、background-color、transform 这类触发合成层的属性。
用 opacity + 预设 backdrop-filter 实现可靠淡入
这是当前最稳、兼容性最好、性能开销最低的方案。核心是让模糊值“始终存在”，只通过透明度变化制造渐显感。
- 元素初始状态必须已带完整
backdrop-filter: blur(8px)和半透背景（如background-color: rgba(255,255,255,0.15)），否则淡入过程会先闪出实色块 - 避免用
display: none控制显隐，它会中断backdrop-filter的渲染上下文，Safari 下易白屏或延迟 - 加
transform: scale(0.99)可触发硬件加速层，缓解 macOS Safari 上opacity过渡时的文字抖动 - 不要对
opacity单独过渡，搭配transform一起写，例如：transition: opacity 0.4s ease, transform 0.4s ease
Safari 下毛玻璃淡入闪烁或失真的应对
macOS Monterey 及更早、iOS 15.4 之前版本存在真实渲染缺陷：文字锯齿、背景撕裂、短暂全黑。根源是 Safari 对 backdrop-filter + opacity 的合成策略不稳定。
- 把
blur()值控制在4px–8px区间，高模糊半径加剧问题 - 避免在
overflow-y: auto容器上直接应用淡入，改用position: fixed的蒙层覆盖 - 父容器不能有
opacity，否则子元素的backdrop-filter全部失效 - 别用
filter: blur()和backdrop-filter同时作用于同一元素——双重模糊会让文字严重发虚
想做“模糊强度渐变”？试试 mask 配合 backdrop-filter
backdrop-filter 的 blur() 值不能插值，但你可以用 mask-image: linear-gradient() 控制模糊生效区域，制造视觉上的“上清下糊”或“中心强边缘弱”效果。
-
mask必须作用在已启用backdrop-filter的元素上，且该元素背景需为半透明（如background: rgba(255,255,255,0.1)） - 推荐写法：
mask-image: linear-gradient(to bottom, black 0%, transparent 100%)表示顶部不模糊、底部完全模糊 -
mask不支持transition，但可用mask-position或mask-size动画来移动渐变区域——比改blur更可靠 - 切记：
mask不能直接作用于backdrop-filter元素自身，必须分层；也别用background-blend-mode，它和backdrop-filter在 Safari 中易闪屏
blur 值、background 透明度、border-radius、阴影之间的微妙平衡——稍一过量，玻璃就变磨砂窗，再过一点就成毛毯。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
