blur() 会向外扩展约两倍模糊值的像素区域采样，溢出部分用白色填充形成“白边”；需在直接父容器设 overflow: hidden 或用 scale()+负margin 方案遮蔽。
blur() 渲染时会向外扩展采样区域
filter: blur() 不改变元素盒模型尺寸，但会在绘制阶段主动向外扩展约两倍 blur() 值的像素区域。这部分溢出像素属于独立渲染层，采样源是透明画布——当它漏到父容器可视区外，浏览器就用白色（或当前页面背景色）填充那块空白，视觉上就是“白边”。这不是 bug，是 CSS Filter Effects Level 1 规范明确要求的行为。
给模糊元素自身加 overflow: hidden 没用
因为 overflow 只裁剪盒模型边界内的内容，而 blur 溢出的是渲染层像素，压根不在该元素的 layout box 里。常见错误写法：.blur-element { overflow: hidden; filter: blur(4px); } —— 完全无效。
- 真正起作用的是它的**直接父容器**：必须在父元素上设
overflow: hidden - 若父容器本身已是
overflow: auto或需要滚动，此方案直接失效 - 父容器含
position: absolute子元素（如下拉菜单、tooltip）时，可能被意外裁掉 - Safari 偶发重绘异常，可加
transform: translateZ(0)缓解
scale() + 负 margin 是更灵活的替代方案
当 overflow: hidden 不可用时，用 transform: scale() 把内容撑大，再用负 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(12px)配margin: -6px -
scale和margin必须同时加在同一元素上；只加一个，白边或偏移仍存在 - 对
position: absolute子元素友好，不会像overflow: hidden那样意外裁掉它们
background-size 扩展只适用于图片背景场景
当模糊对象是带背景图的容器（如毛玻璃登录页），白边常因采样越界取到空白区域所致。
立即学习“前端免费学习笔记（深入）”；
- 把
background-size: cover改成background-size: 150% 150%，让背景多铺一圈 -
blur值较大（如 >10px）时，可搭配给body或html设置相同背景图，确保模糊区域外也有像素可采样 - 避免和
border-radius同时使用——圆角裁剪会提前切掉一部分背景，模糊时采样范围进一步受限，白边加倍 - 纯色背景下此法无效
blur 值与 scale/margin 的匹配关系。它不是数学公式能算出来的——设备像素比、字体抗锯齿策略、GPU 驱动版本都会影响最终呈现。建议用 CSS 变量 + DevTools 实时拖动调试。 
