Firefox 100+ 已完整支持标准 filter（如 blur()、drop-shadow()），滤镜不显示主因是图片未加载成功、路径失效或误用 WebKit 私有语法；需检查 Network 请求状态、about:config 中 image 权限及 filter 单位与参数完整性。
Firefox 不支持 filter 的部分值（如 blur()、drop-shadow() 在旧版本中受限），但当前主流版本（Firefox 100+）已完整支持标准 CSS filter。真正导致“滤镜不显示”的，90% 是因为图片被拦截、路径失效、或误用了仅 WebKit 支持的私有语法——不是滤镜本身失效，而是它根本没作用到有效图片上。
检查图片是否真的加载成功
滤镜不会让红叉变模糊，它只处理已渲染的像素。Firefox 中图片显示红叉，filter 再多也白搭。
- 打开 DevTools → Network 标签 → 刷新页面 → 筛选
img→ 查看对应图片请求的状态码：若为0或403，说明图片根本没发出去或被拒绝，先解决加载问题 - 重点检查
permissions.default.image是否被设为0（在about:config中重置为1） - 若图片来自第三方图床（如百度、搜狗），需同步检查
network.http.referer.XOriginPolicy是否为1，否则 Referer 被清空导致 403
确认 filter 语法是否跨浏览器安全
Firefox 支持所有标准 filter 函数（blur()、contrast()、grayscale()、drop-shadow() 等），但不支持 WebKit 私有写法，也不接受无效单位或拼写错误。
- ❌ 错误写法：
filter: blur(5);（缺单位）→ 必须写blur(5px) - ❌ 错误写法：
filter: drop-shadow(0 0 10px #000);（Firefox 要求第四参数为颜色，不能省略）→ 正确是drop-shadow(0 0 10px rgba(0,0,0,0.5)) - ✅ 安全写法：
filter: contrast(1.2) brightness(0.9) saturate(0.8);（多个函数用空格连接，无分号） - ⚠️ 注意：
url(#svg-filter)引用 SVG 滤镜在 Firefox 中可用，但必须确保<filter>定义在 DOM 中且 ID 匹配，且不能依赖外部 SVG 文件（跨域限制更严）
排查父容器或层叠上下文导致的视觉失效
滤镜生效了，但你看不见——常见于 overflow: hidden、transform 触发新层叠上下文、或被 mask-image / clip-path 裁切。
立即学习“前端免费学习笔记（深入）”；
- 给图片加临时边框：
outline: 2px solid red;，确认它是否被父容器裁掉（比如父元素设了overflow: hidden且图片带transform: scale(1.1)） - 若图片在
position: absolute或transform容器中，检查是否意外触发了will-change: transform或contain: paint，它们可能干扰滤镜渲染（Firefox 115+ 已改善，但旧版仍存） -
filter不会改变元素尺寸，但drop-shadow()的偏移可能被父容器截断——改用box-shadow+background-clip: padding-box更可控
避免与 backdrop-filter 混淆
很多人搜“CSS 图片滤镜”，实际想用的是背景模糊（backdrop-filter），但它和 filter 完全是两回事：前者作用于背后内容，后者作用于自身。而 backdrop-filter 在 Firefox 中至今未实现——无论你怎么写 backdrop-filter: blur(8px)，Firefox 都直接忽略，不报错、不降级、不提示。
- 别试
-moz-backdrop-filter，它不存在 - 别用 JS 检测：
getComputedStyle(el).backdropFilter在 Firefox 返回空字符串，在 Safari 可能返回值但不生效，不可靠 - 真要模拟毛玻璃效果，只能用双层结构：下层高透明度
rgba()背景 + 上层内容，再用@supports (backdrop-filter: blur(1px)) and (-webkit-backdrop-filter: blur(1px))包裹增强层
最容易被忽略的一点：Firefox 对 CSS 的容错率比 Chrome 低。一个漏写的引号、多出的逗号、或 BOM 头导致的解析中断，都可能让整张样式表后续规则失效——包括 filter。先确保 CSS 文件是 UTF-8 无 BOM 编码，再查滤镜本身。
