filter: blur() 无效主因是父容器 overflow 隐藏模糊溢出像素或层叠上下文干扰；backdrop-filter 仅作用于透明元素背后的层，需 -webkit 前缀且 iOS 15.4+ 支持；mix-blend-mode 易致文字发灰，应限范围并优选 overlay/soft-light。
定位元素上加 filter: blur() 为什么没效果？
因为 filter 在某些定位组合下会触发层叠上下文，导致模糊“作用在自身但被裁剪”或“被父容器 overflow 隐藏”。最常见的是给 position: absolute 元素加 filter，结果什么也看不出来。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否设置了
overflow: hidden或overflow: auto—— 模糊后的像素溢出会被直接裁掉 - 确保该元素没有被更上层的
z-index或transform干扰渲染顺序（filter依赖正确的绘制层） - 临时加
outline: 1px solid red看实际渲染范围，确认模糊区域是否真的被裁了 - 若必须用
overflow: hidden，可改用backdrop-filter（仅作用于背景，不模糊内容本身）
backdrop-filter 和 filter 混用时层级怎么排？
backdrop-filter 只对“背后”的内容生效，和 filter 完全不是同一层。它不改变当前元素，只影响透过该元素看到的、位于其下方的那些层 —— 所以它和 z-index、position 强相关。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
backdrop-filter要生效，当前元素必须是“透明/半透明”的（比如background-color: rgba(255,255,255,0.8)），否则背后内容被完全遮住，滤镜无从作用 - 如果同时用了
filter和backdrop-filter，filter会先模糊当前元素，再由backdrop-filter模糊它背后的层 —— 二者不叠加，也不冲突 - 注意 Safari 对
backdrop-filter的兼容性：需加-webkit-backdrop-filter，且 iOS 15.4+ 才稳定支持blur()（旧版只认none）
用 mix-blend-mode 做文字穿透背景时，为什么颜色发灰或消失？
mix-blend-mode 是基于颜色通道实时混合的，不是简单变透明。比如 mix-blend-mode: multiply 和深色背景混，文字可能变黑到看不见；screen 遇到浅色背景又容易过曝。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先试
mix-blend-mode: overlay或soft-light，它们对明暗适应性更强 - 避免直接在
body或全屏div上设mix-blend-mode—— 整个文档流参与混合，极易失控；应限定在明确的容器 + 子元素结构里 - 若背景是图片，记得加
background-blend-mode控制图层内部混合，别和mix-blend-mode搞混 - Chrome DevTools 的“Rendering”面板打开 “Blend mode visualizer”，能直观看到哪些区域实际发生了混合
绝对定位弹窗加模糊，为什么边缘锯齿严重？
不是 CSS 写错了，是浏览器对 filter: blur() 的光栅化处理在高 DPI 屏幕或缩放比例非 100% 时精度不足，尤其当元素带 border-radius 或非整数 top/left 值时，模糊采样会失真。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给模糊元素加
will-change: filter，提示浏览器提前升层，减少重绘抖动 - 避免用百分比或
calc()计算定位值，尽量用整数px（如top: 100px而非top: 10%） - 如需圆角模糊，不要只靠
border-radius，用clip-path: inset(0 round 8px)更可控 - 移动端慎用 —— iOS Safari 的
filter模糊性能差，滑动中易卡顿，可降级为纯色遮罩 + 半透明文字
真正难的不是写对那行 filter，而是得时刻想着它背后那一整套层叠、绘制、光栅化的链条。稍微动一个参数，可能就跨过了浏览器优化的临界点。
