filter: grayscale() 在现代浏览器中直接生效，IE 完全不支持；建议统一用百分比值如 grayscale(100%)；PNG 透明边缘可能出现灰晕；高频切换需谨慎以防性能下降。
filter: grayscale() 在现代浏览器中直接生效，但 IE 完全不支持
Chrome、Firefox、Safari、Edge（Chromium 版）都支持 filter: grayscale()，无需前缀；IE 11 及更早版本完全忽略该属性，连 filter: url(#grayscale) 的 SVG 滤镜方案也仅部分支持且性能差。如果项目仍需兼容 IE，得准备降级方案（比如用 SVG filter 或 JS 模拟），否则直接写 filter: grayscale(100%) 即可。
grayscale() 接受 0~1 或 0%~100% 数值，别混用单位和无单位值
虽然 grayscale(1) 和 grayscale(100%) 效果相同，但混写（如 grayscale(50)）会被解析为 grayscale(50%) —— 这是 CSS 规范允许的隐式转换，但容易引发误解。建议统一用百分比，语义清晰：
img.bw {
filter: grayscale(100%);
}
img.bw-half {
filter: grayscale(50%);
}
img.bw-off {
filter: grayscale(0%);
}
filter 作用于整个元素，图片带透明背景时边缘可能出现灰边
当图片本身含 alpha 通道（如 PNG），filter: grayscale() 会把半透明像素也转为灰度，有时在浅色背景上显出轻微灰晕。这不是 bug，而是滤镜对 RGBA 像素逐通道运算的结果。解决方法有二：
- 给图片加
background-color: white（仅适用于预期白底场景） - 用
backdrop-filter或 canvas 手动处理像素（成本高，一般不必要）
性能敏感场景下避免在滚动/动画中频繁切换 grayscale 值
filter 属于会触发 GPU 加速的属性，但频繁变更（比如 hover 时从 0% 切到 100% 再切回）可能在低端设备上造成掉帧。实测发现：
立即学习“前端免费学习笔记（深入）”；
- 静态黑白图：放心用
grayscale(100%) - hover 切换：加
transition: filter 0.2s ease能缓解卡顿 - 滚动视差或 canvas 动画中动态控制：优先考虑用
opacity或 class 切换预渲染的黑白图，而非实时计算
真正要小心的不是 grayscale 本身，而是把它塞进高频重绘链路里 —— 那时候它就从便利工具变成性能瓶颈了。
