filter: blur()在边缘漏出白边是因为其绘制阶段向外扩展约两倍模糊半径的像素区域，这些溢出像素属于独立渲染层且默认填充白色背景，而overflow: hidden仅裁剪盒模型内内容，故必须作用于直接父容器才能截断；若父容器需滚动或含absolute子元素，则改用transform: scale()配合负margin补偿。
filter:blur() 为什么会在边缘漏出白边？
filter: blur() 不改变元素盒模型尺寸，但它在绘制阶段会向外扩展约两倍模糊半径的像素区域。这些溢出像素属于独立渲染层，而默认背景是透明画布——当它漏到父容器可视区外，浏览器就用白色（或当前页面背景色）填充那块空白，视觉上就是“白边”。
常见现象包括：
-
blur(8px)后四边出现均匀白边，尤其在浅色背景下明显 - 模糊图片放在
div里，div边框内侧有毛边白线 - 动画中白边忽隐忽现，Safari 更容易复现
这不是 bug，是规范行为：CSS Filter Effects Level 1 明确要求模糊必须采样并绘制超出原始边界的内容。
overflow: hidden 为什么对自身无效？
给模糊元素自己加 overflow: hidden 完全没用，因为：
-
overflow只裁剪该元素盒模型边界内的内容 -
blur()溢出的是绘制层像素，不在盒模型内部 - 浏览器不会把模糊扩出的部分“算进”该元素的 layout box
真正起作用的是它的直接父容器：只有父容器设了 overflow: hidden，才能物理截断那些溢出像素。
但要注意：
- 父容器若已是
overflow: auto或需要滚动，就不能这么干 -
position: absolute子元素可能被意外裁掉（如下拉菜单、tooltip） - Safari 偶发重绘异常，可加
transform: translateZ(0)触发硬件加速缓解
transform: scale() + 负 margin 怎么配才不偏移？
这是应对复杂布局的替代方案：用缩放撑大内容区域，让模糊溢出部分自然落在父容器可视范围内，再用负边距拉回视觉原位。
关键要点：
-
scale()和margin必须同时加在同一元素上；只加一个，白边或偏移仍存在 -
blur(4px)常用scale(1.03)～scale(1.05)，配margin: -2px～-3px -
blur(12px)建议scale(1.08)～scale(1.1)，配margin: -5px～-6px - 非线性关系：同一组值在 Retina 屏和普通屏下表现不同，建议用 CSS 变量 + DevTools 实时拖动调试
- 对
position: absolute子元素友好，不会像overflow: hidden那样意外裁掉它们
真正难调的是 blur 值和 scale/margin 的匹配关系
它不是数学公式能算出来的——设备像素比、模糊强度、字体抗锯齿策略、甚至 GPU 驱动版本都会影响最终呈现。比如 margin: -3px 在 Chrome macOS 上刚好，在 iOS Safari 上可能还差 0.5px。别依赖固定数值，优先试 overflow: hidden；不行再上 scale+margin；伪元素分层+backdrop-filter 是更干净的解法，但得兜底兼容性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
