blur()动画白边源于高斯模糊越界采样透明底色，需父容器设overflow:hidden（非自身）并满足尺寸与定位条件；失效时用scale+负margin兜底；backdrop-filter可减少白边但圆角会漏光。
blur() 动画时白边是渲染越界，不是动画没写好
filter: blur() 在动画中出现白边，根本原因和静态模糊一样：高斯模糊会向外扩展约 blur() 值的两倍像素，这部分溢出区域若未被截断，就会采样到透明画布底色，在浅色背景下表现为白边。动画过程只是让这个越界行为更频繁触发，尤其在 Chrome/Safari 中重绘节奏不稳时，白边会“忽隐忽现”，看起来像“渗漏”。
overflow: hidden 对动画无效？那是加错了地方
给模糊元素自身设 overflow: hidden 没用——它只裁剪内容流，不影响 filter 渲染层的绘制范围。必须作用于**直接父容器**，且该父容器需满足：
• 有明确尺寸（不能是 height: auto 或依赖内容撑开）
• 无 transform、will-change 等触发新 stacking context 的属性干扰裁剪边界
• 若父容器用了 position: absolute 或 transform，某些 Safari 版本会忽略其 overflow: hidden，此时需额外加 transform: translateZ(0) 强制重建裁剪上下文
scale + 负 margin 是动画场景最稳的兜底方案
当 overflow: hidden 因布局复杂或兼容性问题失效时，用缩放补偿更可靠：
• 对模糊元素同时应用 transform: scale(1.04) 和 margin: -4px（数值按 blur(8px) 类推）
• 必须在同一元素上同时声明，分开写在不同类里容易被覆盖
• 避免用 scale3d()：虽然常被推荐为“GPU 友好”，但它在部分 Android WebView 中反而加剧白边抖动
• 不要对整个动画元素加 will-change: transform, filter：这会让浏览器提前升层，但 blur 渲染仍发生在旧合成层，导致缩放与模糊错位，白边更明显
backdrop-filter 动画白边少，但圆角下会漏光
如果目标是毛玻璃背景（比如弹窗背后模糊），优先换用 backdrop-filter: blur(6px)：
• 它只模糊背后内容，文字/控件本身不参与模糊，天然规避文字发虚+白边叠加
• 动画时白边极少，因模糊区域由浏览器底层统一管理
• 但注意：一旦元素带 border-radius，模糊光晕会从圆角外“漏出”——clip-path 和 overflow: hidden 都无法裁掉它，目前唯一有效解法是套一层同尺寸、同圆角的 ::before 伪元素，用 background 盖住漏光区
立即学习“前端免费学习笔记（深入）”；
