blur() 白边是规范行为，因采样区域越界至透明画布所致；overflow: hidden 需加在父容器才有效，否则可用 transform: scale() 配合负 margin 补偿，背景图场景优先扩展 background-size。
filter: blur() 的白边是渲染越界，不是样式写错了
blur() 白边不是 bug，是规范行为：它在绘制阶段主动向外扩展约 2 × blur() 像素的采样区域。这部分区域超出原始盒模型边界，若父容器没做截断，就会采样到透明画布底色——浅色背景下就表现为“白边”。Safari 渲染更激进，白边尤其明显。
给模糊元素自身加 overflow: hidden 为什么无效
因为 filter 作用于渲染层（paint layer），不改变盒模型尺寸；overflow: hidden 只能裁剪盒模型边界内的内容，对已生成的越界像素毫无作用。
- 写成
.blur-element { overflow: hidden; filter: blur(4px); }完全没用 - 必须加在**直接父容器**上，才能物理截断溢出像素
- 若父容器已有
overflow: auto或需滚动，此法失效
overflow: hidden 失效时，用 transform: scale() + margin 补偿
这是应对复杂布局的通用 fallback：放大内容让越界像素“进入”父容器可视区，再用负 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、又要子元素 position: absolute 伸出、还要父容器保持滚动的组合场景。这时候得手动调 scale 和 margin 的配比，用 DevTools 实时拖动 CSS 变量调试——别指望一个固定值通吃所有分辨率和 blur 强度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
