::before 伪元素用于制造可控模糊层而非防模糊，需满足 position: relative、content: ""+absolute+inset: 0、z-index: -1 三条件；背景需显式设 background-size 和 background-position；iOS Safari 模糊半径宜控制在 2–8px。
不能用 ::before 防止背景图片模糊——它本身不防模糊，而是用来「制造可控的模糊层」。真正要防的是：别让 filter: blur() 错糊到文字、按钮这些内容上。
为什么直接给容器加 filter: blur() 会连文字一起糊
因为 filter 作用于整个渲染树，包括所有子元素。哪怕你只写 .card { filter: blur(4px); }，里面的 <p></p>、<button></button> 全部变虚，无法点击、阅读困难。
- 浏览器不会区分“背景”和“前景”，它只认 DOM 节点层级
-
filter不可被子元素用filter: blur(0)抵消，这是渲染机制决定的 - 常见错误是以为加个
z-index: 1就能“盖过模糊”，其实没用——模糊发生在合成阶段，不是层叠顺序问题
::before 伪元素必须满足的三个硬性条件
否则模糊层会错位、裁切、或盖住内容，看起来像“没生效”。
- 父容器必须设
position: relative，否则::before的position: absolute会往上找最近定位祖先（可能是body），导致位置漂移 -
::before必须有content: ""+position: absolute+inset: 0（或等效的top:0; left:0; width:100%; height:100%） -
z-index: -1是强制项，不是建议；设成0或不写，它就会压在内容上，结果就是“文字糊了”
background-image 怎么继承才不会拉伸变形
background: inherit 只继承 background-image、background-position、background-repeat，但不继承 background-size 和 background-color。很多人漏写这两项，结果模糊后背景偏移、边缘发白、比例失真。
立即学习“前端免费学习笔记（深入）”；
- 必须显式写
background-size: cover和background-position: center - 纯色背景不能靠
inherit，得直接写死，比如background-color: #f5f5f5 - 渐变背景同理，要复制完整值：
background: linear-gradient(135deg, #fff, #e6e6e6) - 如果父容器有
transform（如scale(0.98)），可能触发新层叠上下文，此时还得给内容也加position: relative确保层级可控
移动端和 Safari 的模糊半径陷阱
iOS Safari 对大模糊半径（>8px）支持不稳定：可能降级为低精度模糊、跳帧、甚至完全不模糊。这不是 bug，是 WebKit 渲染策略限制。
- 推荐模糊范围控制在
blur(2px)到blur(8px)之间 - 过渡动画必须带单位：
filter: blur(8px)→filter: blur(0px)，写成blur(0)或blur(none)在 Safari 下会跳变 - 必须提前声明
will-change: filter在伪元素上，否则 Chrome/Safari 可能不启用 GPU 合成，导致卡顿 - 如果伪元素用了
fixed定位（比如做全局弹窗背景），记得加contain: layout paint防止滚动时重绘异常
最常被忽略的一点：伪元素模糊不是“真毛玻璃”，它依赖静态背景图。如果页面背景是 JS 动态生成、或随滚动变化（比如视差滚动），这个方案就失效了——这时候得换 backdrop-filter 或服务端截图方案。
