Blur后出现白边是因为滤镜扩大渲染区域致边缘透出，首选父容器设overflow:hidden截断，次选scale放大加负margin补偿，内阴影仅适用于纯色背景应急。
Blur后出现白边是因为滤镜在容器外扩了渲染区域
CSS filter: blur() 实际会扩大元素的绘制边界（通常向外扩展约 blur() 值的两倍），超出原始盒模型范围。如果父容器没设 overflow: hidden，或背景不连续，就会漏出默认透明/白色底色——看着像“白边”，其实是画布边缘透出。
用 overflow: hidden 最直接但要注意裁剪风险
给模糊元素的**直接父容器**加 overflow: hidden 是最轻量的解法，能物理截断溢出像素：
.blur-container {
overflow: hidden;
}
.blur-element {
filter: blur(4px);
}- 必须作用于父容器，对自身设
overflow: hidden无效（filter影响的是渲染层，不是盒模型） - 若子元素有
position: absolute且超出父尺寸，会被意外裁剪 - 在 Safari 中偶有重绘异常，可加
transform: translateZ(0)触发硬件加速缓解
Scale放大 + 负 margin 补偿是更稳妥的视觉方案
用 transform: scale() 把模糊内容撑大，再用负 margin 拉回原位，让溢出部分被父容器自然覆盖：
.blur-element {
filter: blur(4px);
transform: scale(1.05); /* 放大5% */
margin: -2px; /* 约等于 blur 值 × 0.5 */
}-
scale值建议 1.03–1.08，太大导致文字/图标失真 -
margin取值不是严格公式，需按实际blur值微调：4px blur 通常 -1px～-3px 就够 - 该方法不依赖
overflow，适合需要保留绝对定位子元素的场景
内阴影遮盖只适用于有明确背景色的容器
box-shadow: inset 可以用深色/同色阴影压住边缘，但本质是“掩盖”而非“修复”：
立即学习“前端免费学习笔记（深入）”；
.blur-element {
filter: blur(4px);
box-shadow: inset 0 0 12px 6px #fff; /* 白底用白阴影 */
}- 仅当父容器背景为纯色时有效；渐变、图片或透明背景下会穿帮
- 阴影宽度和扩散值要略大于
blur值（例如blur(4px)配12px扩散） - 叠加多层阴影可能影响性能，移动端慎用
真正要根治，得从渲染边界入手：优先试 overflow: hidden，不行再上 scale + margin 补偿。内阴影只是应急补丁，别当成默认方案。
