直接加 overflow: hidden 到父容器是解决模糊白边最可靠方式，因 filter blur 在渲染层扩展采样区域取到透明底色；对模糊元素自身设此属性无效，必须作用于其直接父容器。
直接加 overflow: hidden 到父容器上，90% 的场景就能解决。这不是权宜之计，而是从渲染层截断越界像素的最可靠方式——白边本质不是样式写错，是 filter: blur() 主动向外扩展了约两倍 blur() 值的采样区域，取到了透明画布底色。
为什么对模糊元素自身设 overflow: hidden 无效
因为 filter 作用于渲染层（paint layer），不改变盒模型尺寸。溢出像素在绘制阶段就已生成，overflow 只能裁剪盒模型边界内的内容。必须作用于**直接父容器**才能物理截断这些额外像素：
- 若父容器已有
overflow: auto或需保留滚动能力，此方案会失效 - 子元素用了
position: absolute且故意伸出父容器（如下拉菜单），会被意外裁掉 - Safari 中偶发重绘异常，可加
transform: translateZ(0)触发硬件加速缓解
用 transform: scale() + margin 补偿更灵活
当 overflow: hidden 不可用时，这是真正可控的视觉修复方案：放大内容让溢出部分“进入”父容器可视区，再用负 margin 拉回原位，边缘自然被父容器遮盖。
-
scale(1.05)是常见起点；blur(4px)用scale(1.03) ~ scale(1.05)，blur(12px)建议scale(1.08) ~ scale(1.1) -
margin取值靠经验：blur(6px)配margin: -3px，blur(10px)配margin: -5px左右 - 必须同时加在同一元素上；只加
scale会整体偏移，只加margin白边仍在 - 对
position: absolute子元素友好，不干扰其定位逻辑
背景图场景优先试 background-size 扩展
当模糊对象是带背景图的容器（如毛玻璃登录页），白边常因采样越界取到空白区域所致。此时扩铺背景比裁剪或缩放更自然：
- 把
background-size: cover改成background-size: 150% 150%，让背景多铺一圈 - 若
blur值较大（如 >10px），可搭配给body或html设置相同背景图，确保模糊区域外也有像素可采样 - 避免和
border-radius同时使用——圆角裁剪会提前切掉一部分背景，模糊时采样范围进一步受限，白边加倍 - 此法仅适用于背景为图片的场景；纯色背景下无效
真正难处理的是那些既要大 blur、又要绝对定位子元素伸出、还要保持父容器滚动的组合场景。这时候得手动调 scale 和 margin 的配比，用 DevTools 实时拖动 CSS 变量调试——别指望一个固定值通吃所有分辨率和 blur 强度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
