最简单有效的解法是给模糊元素的直接父容器加 overflow: hidden；若父容器需滚动或子元素用了 position: absolute，则改用 transform: scale() 配合负 margin 补偿，因 filter: blur() 在绘制阶段扩出像素区域，overflow 仅裁剪盒模型边界内内容。
直接给模糊元素的直接父容器加 overflow: hidden，是最简单有效的解法；但若父容器需要滚动或子元素用了 position: absolute，就得换用 transform: scale() 配合负 margin 补偿。
为什么对自身设 overflow: hidden 无效
filter: blur() 不改变盒模型尺寸，它是在绘制阶段额外扩出约两倍模糊半径的像素区域。这些溢出像素属于渲染层（paint layer），overflow 只能裁剪盒模型边界内的内容。所以必须作用于直接父容器才能物理截断它们。
- 写成
.blur-element { overflow: hidden; filter: blur(4px); }完全没用 - 如果父容器本身已有
overflow: auto或需要保留滚动能力，这个方案就失效 - Safari 中偶有重绘异常，可加
transform: translateZ(0)触发硬件加速缓解
transform: scale() + 负 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必须同时加在同一元素上；只加一个，白边或偏移仍存在 - 对
position: absolute子元素友好，不会像overflow: hidden那样意外裁掉下拉菜单之类的内容
文字发虚、边缘毛边不是“模糊没调好”，而是图层分裂了
给容器加 filter: blur() 后，里面文字变糊，根本原因不是参数问题，而是浏览器为该元素创建了独立合成图层，文字被拖进 GPU 光栅化流程，双线性插值导致边缘降质。
- 别给文字父容器加
will-change: filter或transform: translateZ(0)——这只会固化糊感，还吃内存 - 正确做法是拆结构：用伪元素（如
::before）承载模糊效果，文字作为兄弟节点单独存在 - 实在改不了 DOM，可对文字节点加
backface-visibility: hidden（Chrome 110+ 有效），或降级用text-shadow模拟轻微虚化 - 打开 Chrome DevTools → Layers 面板，看文字是否被标红——只要红了，说明它已被卷入模糊图层
真正要根治，得从渲染边界入手：优先试 overflow: hidden，不行再上 scale+margin；背景延展或内阴影只是特定场景下的补救，不是通用解。别把 box-shadow: inset 当主力方案——它只是遮盖，不是修复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
