白边是blur()渲染时向外扩展约两倍模糊半径采样所致，溢出像素属独立渲染层，超出父容器可视区时被浏览器以白色填充；必须在直接父容器设overflow:hidden才能截断，自身设置无效。
直接给模糊元素的父容器加 overflow: hidden 就能解决边缘白边和毛边溢出问题，但必须作用于“直接父容器”，对自身加无效。
为什么 filter: blur() 会导致边缘白边？
blur 渲染时会向外扩展约两倍模糊半径的像素区域采样，这部分像素不属于原元素的盒模型，而是独立渲染层。当它超出父容器可视边界，浏览器就用白色（或背景色）填充空白——这就是白边。不是 bug，是 CSS Filter Effects Level 1 规范行为。
-
filter: blur(4px)实际扩出约 8px 的溢出区域 - 该区域无法被
overflow: hidden裁剪，除非裁剪目标是它的**直接父容器** - 给模糊元素自己设
overflow: hidden完全没用，因为溢出像素压根不在它的 layout box 里
如何正确使用 overflow: hidden 截断溢出
这是最轻量、兼容性最好的解法，适用于大多数静态布局。
- 必须写在模糊元素的**直接父容器**上，例如：
.parent { overflow: hidden; }，而.blur-element { filter: blur(6px); } - 若父容器本身需要滚动（
overflow-y: auto），则此方案失效——overflow: hidden和auto冲突，滚动条会消失 - Safari 偶发重绘异常（白边闪现），可加
transform: translateZ(0)触发硬件加速缓解 - 若子元素用了
position: absolute且超出父尺寸（如下拉菜单、tooltip），会被意外裁剪，需换方案
当 overflow: hidden 不可用时，用 transform: scale() + 负 margin
这是应对滚动容器、绝对定位子元素或复杂 flex/grid 布局的稳妥替代方案。
- 原理：用缩放撑大内容区域，让 blur 溢出部分自然落在父容器可视范围内，再用负 margin 拉回视觉原位
-
scale(1.05)是常见起点；blur(4px)推荐scale(1.03)–scale(1.05)，blur(12px)推荐scale(1.08)–scale(1.1) - 对应负 margin 经验值：
scale(1.05)配margin: -3px，blur(12px)通常配margin: -6px -
scale和margin必须同时加在同一元素上；只加一个，白边或偏移仍存在
文字发虚不是参数问题，是图层分裂了
blur 后文字边缘毛糙、发虚，根本原因不是模糊值太大，而是浏览器为该元素创建了独立合成图层，文字被拖进 GPU 光栅化流程，双线性插值导致降质。
- 别给文字父容器加
will-change: filter或transform: translateZ(0)——这只会固化糊感，还吃内存 - 正确做法是结构拆分：用伪元素（如
::before）承载filter: blur()，文字作为兄弟节点单独存在 - 实在改不了 DOM，可对文字节点加
backface-visibility: hidden（Chrome 110+ 有效），或降级用text-shadow模拟轻微虚化 - 打开 Chrome DevTools → Layers 面板，看文字是否被标红——只要红了，说明它已被卷入模糊图层
真正容易被忽略的是：blur 溢出不是样式“没写对”，而是渲染机制决定的物理现象；处理它不能只盯着元素自身，得从父容器层级、图层归属、甚至 DOM 结构去干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
