blur()白边本质是渲染越界，因模糊扩大绘制区域采样透明底色所致；解决首选父容器overflow:hidden，次选transform:scale()+负margin补偿，背景延展仅适用于图片场景。
blur() 白边本质是渲染越界，不是样式写错了
filter: blur() 本身不改变元素尺寸，但会扩大绘制区域——通常向外扩展约 blur() 值的两倍。这部分溢出像素若没被截断或覆盖，就会采样到透明画布底色，在浅色背景下表现为“白边”。这不是 bug，是规范行为，Safari 尤其明显。
overflow: hidden 是最直接解法，但只对父容器生效
给模糊元素的**直接父容器**加 overflow: hidden，能物理截断溢出像素：
- 必须作用于父容器，对自身设
overflow: hidden无效（filter影响的是渲染层，不是盒模型） - 若子元素用了
position: absolute且超出父尺寸，会被意外裁剪 - Safari 中偶有重绘异常，可加
transform: translateZ(0)缓解
transform: scale() + 负 margin 更稳妥，适合复杂布局
用 transform: scale() 把内容撑大，再用负 margin 拉回原位，让溢出部分被父容器自然遮盖：
-
scale(1.05)是常见起点：4px 模糊用1.03–1.05，10px 模糊建议1.08–1.1 -
margin取值靠经验：比如blur(6px)配margin: -3px，blur(12px)配margin: -6px - 必须同时作用于同一元素：只加
scale会导致偏移；只加margin白边仍在 - 该方案对
position: absolute子元素友好，不会像overflow: hidden那样意外裁掉它们
background-size 扩展或 body 延展背景，专治图片白边
当模糊对象是带背景图的元素时，白边常因采样越界取到空白区域所致：
- 把
background-size: cover改成background-size: 150% 150%，让背景多铺一圈，模糊时有足够像素可采样 - 给
body或html设置相同背景图，确保 blur 区域外也有内容可模糊（注意：大blur值下视觉对比可能突兀） - 避免在
blur元素上同时用border-radius——圆角裁剪 + 模糊采样 = 白边加倍
真正要根治，得从渲染边界入手：优先试 overflow: hidden，不行再上 scale + margin 补偿。背景延展只适用于图片场景，且需注意视觉一致性。别把 box-shadow: inset 当主力方案——它只是掩盖，不是修复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
