filter作用于父容器时文字必然模糊，因其在合成层早于文字光栅化阶段执行高斯模糊，唯一可靠解法是用伪元素或兄弟元素隔离滤镜作用域，使文字处于独立未滤镜渲染层。
filter 作用于父容器时，文字必然模糊
只要对包含文字的元素（比如 <div> 或 <code><p></p>）直接设置 filter: blur(1px)，文字就会被卷入高斯模糊计算——这不是渲染“看起来”模糊，而是浏览器真的把文字像素和背景一起采样、混合、输出。哪怕值是 0.2px，小字号文字边缘也会发虚。这种模糊发生在合成层（compositing layer），早于文字光栅化阶段，text-shadow、font-smoothing 或 color 调整全无效。
z-index 本身不触发分层，但常被误用为“隔离手段”
z-index 只在定位上下文（position: relative/absolute/fixed）中生效，它控制堆叠顺序，**不创建新图层**。常见错误写法：
.parent { filter: blur(4px); position: relative; }
.text { position: relative; z-index: 2; }
这毫无意义：文字仍在父容器的合成层内，z-index 改变不了渲染管线归属。真正起作用的是让文字脱离该合成层——要么用伪元素承载滤镜，要么用兄弟节点。
transform 是更可靠的分层触发器，但有副作用
transform（非 none 值）会强制浏览器为其创建独立合成层，这是绕过父级 filter 影响文字的可行路径之一。但要注意：
- 必须对文字自身加
transform: translateZ(0)或scale(1)，而非只加在父容器上 - 部分 Chrome 版本需配合
backface-visibility: hidden才能重置其光栅化上下文 - 滥用
transform会导致额外图层堆积，移动端内存压力明显 - 若父容器已因
filter升层，再给文字加transform实际是“升层中再升层”，效果不稳定
真正可控的结构解法只有两种
所有“修锐利”的尝试都只是补救；唯一稳定方案是**从 DOM 结构上隔离滤镜作用域**：
- 用
::before伪元素铺背景 +filter，文字作为普通子元素放在外面（父容器设position: relative） - 把模糊背景做成兄弟元素（如
<div class="bg-blur"></div>），用z-index和position确保它在文字下方 - 绝对不要对
<h1></h1>、<p></p>、<span></span>这类语义化文字容器本身加filter，调试时也别临时加——容易遗忘并上线
文字一旦进入合成层，就不再是 CSS 层面能“调参数修好”的问题。可控点只有两个：滤镜别碰文字容器，颜色操作别塞进 filter 里凑数。
