filter: blur() 作用于文字容器会导致文字不可逆模糊，因其在合成层早于文字渲染阶段执行；应通过伪元素或兄弟元素隔离滤镜作用域，避免对语义化文字容器直接应用filter。
filter: blur() 直接作用于文字容器时必然模糊
只要对包含文字的元素设置 filter: blur(1px)，文字就会不可逆地参与高斯模糊计算——这不是“看起来模糊”，而是浏览器真的把文字像素和背景一起卷积处理了。哪怕只设 0.5px，也足以让小字号文字边缘发虚。这种模糊无法靠 text-shadow 或 font-smoothing 补救，因为滤镜发生在合成层，早于文字渲染阶段。
用伪元素或兄弟元素隔离滤镜作用域
核心思路是：让 filter 只作用于背景或装饰层，文字始终在独立、未滤镜的渲染层中。常见可靠做法：
- 给父容器设
position: relative，用::before伪元素铺背景并加filter: blur(4px)，文字放在普通子元素里 - 把模糊背景做成单独的兄弟元素（如
<div class="bg-blur"></div>），用z-index确保它在文字下方 - 避免对
<h1></h1>、<p></p>等语义化文字容器本身加filter，哪怕只是临时调试
filter + will-change 的组合反而加剧文字退化
有人想“优化性能”给模糊容器加 will-change: filter，结果更糟。原因：
-
will-change会提前创建合成层，而filter在合成层内执行，进一步切断文字与主渲染管线的连接 - 某些浏览器（如 Chrome 124+）对含
filter的will-change元素会降级抗锯齿策略，小字号文字直接变灰边块 - 移动端 WebKit（iOS Safari）对
filter合成层的文字渲染本就保守，加will-change几乎无收益
颜色调整不该依赖 filter，该用 background-blend-mode 或多层渐变
如果模糊是为了“压暗背景突出文字”，filter: brightness(60%) 或 contrast(120%) 是错路——它们同样作用于文字。替代方案更干净：
- 用
background-blend-mode: multiply叠加一层深色半透明色块，不触发新合成层 - 用
linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3))覆盖背景图，文字完全不受影响 - 若必须调色，优先用
color-mix(in srgb, ...)（Chrome 111+）或hsl()调整文字自身颜色，而非滤镜干预
filter 里凑数。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
