真正可用的深色遮罩必须分层实现：伪元素承载模糊背景 + 半透明深色层叠加 + 内容层独立渲染；::before或::after是强制要求，需设position: absolute/fixed、z-index: -1，background-color: rgba(0,0,0,0.6)比#0008更可控，blur()须带单位且不超过6px。
直接给背景容器加 filter: blur() 会把文字和按钮一起糊掉，这不是遮罩，是误操作。真正可用的深色遮罩必须分层实现——伪元素承载模糊背景 + 半透明深色层叠加 + 内容层独立渲染。
伪元素分层是唯一可靠路径
所有“背景模糊但内容清晰”的场景，::before 或 ::after 是强制要求，不能省略。浏览器对 filter 的作用域是整个渲染层，没有“只模糊背后”这种逻辑——backdrop-filter 才有，但它不适用于纯色遮罩。
-
::before必须设position: fixed或absolute，且z-index: -1（不能靠父容器overflow: hidden去裁剪，否则伪元素可能被截断） - 背景图或纯色必须显式写在伪元素上，
background-color: rgba(0,0,0,0.6)比background: #0008更可控 - 如果父容器有
transform（比如scale(0.95)），伪元素会脱离文档流定位，此时得把伪元素提到下或改用position: fixed+inset: 0
blur() 参数必须带单位且不宜过大
blur(6px) 是深色遮罩的实用上限，再大不仅没视觉增益，反而触发降级或卡顿。
-
filter: blur(6px)合法；filter: blur(6)或filter: blur(6%)会被浏览器静默忽略，DevTools 里都看不到生效 - iOS Safari 在
blur(10px)以上常退化为盒状模糊（box blur），安卓旧 WebView 可能直接跳帧甚至不渲染 - 深色遮罩本身不需要强模糊，
blur(2px)～blur(4px)就足够柔化边缘，blur(6px)已属边界试探
深色遮罩需叠加半透明层，不能只靠模糊
仅靠 filter: blur() 无法产生“深色”效果，它只模糊像素，不改变明度。必须额外叠加一层半透明深色。
- 常见错误：把
rgba(0,0,0,0.7)写在主容器上，再给它加filter: blur()→ 文字全糊 - 正确结构：
::before负责模糊（可选背景图或纯色）+::after或额外div负责深色覆盖（background-color: rgba(0,0,0,0.6)） - 若用单伪元素实现，写成：
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(...); filter: blur(4px);——但注意渐变层也会被模糊，边缘可能发虚
移动端和旧浏览器的兜底很实际
不是所有设备都支持伪元素上的 filter，尤其安卓旧 WebView 和 iOS 15.6 以下，得有 fallback。
- 检测支持：可用
@supports (filter: blur(1px))包裹模糊逻辑，不支持时降级为纯色遮罩（background-color: rgba(0,0,0,0.6)） - 避免 JS 动态插入样式，因为资源未加载完成时应用
filter会导致首屏闪一下才模糊——CSS 静态声明更稳 - 真机调试时重点看
z-index层级：用 DevTools 的 “Layers” 面板确认模糊层、深色层、内容层是否各自独立，有没有被overflow: hidden截断采样区域
最易被忽略的是：模糊效果依赖像素采样，背后若被更高 z-index 元素盖住、或父层 overflow: hidden 切掉了伪元素范围，滤镜就完全失效——控制台不报错，页面看起来只是“没模糊”，其实根本没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
