加 filter: blur() 会导致纯色背景出现白边或灰边，因模糊采样向外扩展约两倍值而取到透明底色；需用 overflow: hidden 裁剪父容器，或用 transform: scale() + margin 补偿，伪元素分层方案更可控。
直接给背景色元素加 filter: blur() 一定会越界，这不是 bug，是浏览器渲染机制决定的——模糊采样区域默认向外扩展约两倍 blur() 值，而纯色背景没有额外像素可采样，就取到透明画布底色，表现为白边或灰边。
为什么 overflow: hidden 必须加在父容器上
因为 filter: blur() 作用于渲染层（paint layer），不改变盒模型尺寸。溢出像素在绘制阶段就已生成，overflow: hidden 对自身无效，它只能裁剪盒模型边界内的内容。
- 正确写法：
.parent { overflow: hidden; } .child { filter: blur(4px); } - 错误写法：
.child { overflow: hidden; filter: blur(4px); }—— 完全没用 - 若父容器已有
overflow: auto或需保留滚动能力，此方案会失效 - Safari 中偶发重绘异常，可加
transform: translateZ(0)缓解
当 overflow: hidden 不可用时，用 scale + margin 补偿
这是应对复杂布局（如含 position: absolute 子元素、需滚动、或父容器不能裁剪）的真正可控方案：放大内容让模糊溢出部分“进入”父容器可视区，再用负 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 -
transform: scale()和margin必须加在同一元素上；只加一个，要么偏移要么白边仍在 - 对
position: absolute子元素友好，不会像overflow: hidden那样意外裁掉下拉菜单
纯色背景无法靠 background-size 解决，别试
background-size: 150% 150% 只对图片背景有效，因为要靠多铺一圈像素来供模糊采样。纯色背景没有“额外像素”，扩展后仍是同一种颜色，越界采样仍取到透明底色。
- 如果你看到白边来自
background-color: #fff的容器，说明你误用了背景图方案 - 此时唯一可靠路径是分层：用伪元素承载模糊效果（
::before），主容器只放内容，不参与模糊 - 伪元素必须设
position: absolute或fixed，且z-index: -1，否则可能被父容器裁剪或遮挡 - 不要给伪元素加
border-radius—— 圆角会提前切掉一部分渲染区域，加剧白边
真正难处理的是那些既要大 blur（比如 >10px）、又要子元素绝对定位伸出、还要父容器保持滚动的组合场景。这时候 scale 和 margin 的配比没法通用，得用 DevTools 实时拖动 CSS 变量调试，而不是抄一个固定值。另外，所有模糊值必须带单位（blur(6px)），漏掉 px 就静默失效，尤其在 Safari 和旧 WebView 中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
