Chrome/Safari中filter:grayscale失效常因transform或opacity干扰；IE/Edge需SVG滤镜兜底；全局灰度慎用*选择器，推荐class切换与小数参数统一写法。
filter:grayscale 在 Chrome 和 Safari 中失效？检查是否被 transform 或 opacity 覆盖
很多页面加了 filter: grayscale(100%) 却没效果，不是写错了，而是被其他 CSS 属性“屏蔽”了。Chrome、Safari（基于 WebKit）对 filter 的渲染有特殊限制：当元素同时存在 transform（哪怕只是 transform: translateZ(0)）、opacity 小于 1、或 will-change 指向某些属性时，filter 可能被静默忽略。
- 先用浏览器开发者工具检查该元素的 computed styles，确认
filter是否真的生效（而非被覆盖或降级） - 临时移除
transform和opacity相关声明，看灰度是否出现 - 若必须保留硬件加速（如
transform: translateZ(0)），可改用will-change: filter替代，或把filter提到父容器上
IE 和旧版 Edge 不支持 filter:grayscale？用 SVG 滤镜兜底
filter: grayscale() 在 IE 完全不支持，Edge 12–17 仅支持无参数的 filter: gray（已废弃且效果不稳定）。真要兼容，得 fallback 到 SVG 滤镜——它兼容 IE9+，且可控性更强。
- 在 HTML 中内联一个隐藏的
<svg></svg>，定义<filter id="grayscale"><fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"></fecolormatrix></filter> - CSS 中写
filter: url(#grayscale)，注意 IE 需加-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"（仅 IE6–IE9 有效） - 别直接用
filter: gray，它在 Edge 17 后已被移除，且和grayscale(100%)渲染结果不一致
全局灰度（整站变灰）用 :root + body 选择器，但注意重绘性能
给整个页面加灰度，常见做法是给 加 filter: grayscale(100%)。看似简单，实际会触发全页面重绘（repaint），尤其在滚动或动画中卡顿明显。
- 优先写成
body { filter: grayscale(100%); }，不要用* { filter: ... }—— 后者会让每个元素都单独计算滤镜，性能更差 - 如果页面有 canvas、video 或 WebGL 内容，它们不受
filter影响，需单独处理（比如 canvas 用ctx.filter = 'grayscale(100%)'，但仅 Chrome 支持） - 动态开关灰度时，用 class 切换（如
body.grayscale { filter: grayscale(100%); }）比 JS 直接改 style 更利于浏览器优化
grayscale() 参数传百分比还是小数？不同浏览器解析一致但写法要统一
grayscale() 接受 0–1 的小数或 0%–100% 的百分比，两者等价：grayscale(1) === grayscale(100%)。但混用容易引发维护困惑，而且部分旧工具（如 PostCSS 插件）对百分比解析有 bug。
立即学习“前端免费学习笔记（深入）”；
- 团队项目建议统一用小数形式：
grayscale(0)、grayscale(0.5)、grayscale(1) - 避免写
grayscale(100)（缺 % 符号）——这是无效值，会被浏览器忽略 - 不要依赖
grayscale()的默认值（即不传参），它在所有浏览器中都不生效，必须显式传参
灰度不是简单加一行 CSS 就完事的事。最常被忽略的是硬件加速层与 filter 的冲突，以及 SVG fallback 的路径和 ID 引用是否匹配——漏掉一个 # 或拼错 ID，整套兜底就失效了。
