必须同时写 -webkit-filter: grayscale(100%) 和 filter: grayscale(100%) 以兼容旧版 safari 和 chrome；ie 完全不支持，需 js 替代；注意层叠上下文影响、移动端性能及 svg/canvas 差异。
直接用 filter: grayscale(100%) 就能转成纯灰度，但别只写这一行——兼容性、性能和意外失效才是真问题。
为什么只写 filter: grayscale(100%) 在 Safari 或旧版 Chrome 里可能没反应
WebKit 内核浏览器（Safari、老版 Chrome）必须加 -webkit-filter 前缀才能识别。现代浏览器虽已支持无前缀写法，但不加前缀在 iOS 15.4 之前或 macOS Monterey 早期版本中仍会静默失败。
-
-webkit-filter: grayscale(100%)是必须的兜底项，不能省 -
filter: grayscale(100%)放在后面，覆盖前缀规则（CSS 层叠逻辑） - 不用写
-moz-、-ms-等过时前缀，Firefox 16+、Edge 17+ 已原生支持 - IE 完全不支持
filter（包括grayscale()），若需兼容 IE，得换 JS 方案（如grayscale.js）
grayscale() 的数值到底怎么填：百分比 vs 小数
参数接受两种格式，但行为一致：grayscale(1) ≡ grayscale(100%)，grayscale(0.5) ≡ grayscale(50%)。选哪种取决于团队规范，但要注意：
- 写小数时不能漏掉整数位，
grayscale(.5)合法，但可读性差，容易误读为选择器 - 写百分比更直观，尤其配合
:hover过渡时（如transition: filter 0.3s），grayscale(0%) → grayscale(100%)比小数更易理解 - 值超出范围会被截断：
grayscale(120%)和grayscale(100%)效果相同
图片变灰后文字也糊了？检查父级是否触发了层叠上下文
filter 会强制创建新的层叠上下文（stacking context），如果父容器有 opacity、transform、will-change 或其他滤镜，可能导致子元素灰度效果被裁剪、错位甚至消失。
- 常见陷阱：给
body加filter: grayscale(100%)后，固定定位的弹窗按钮点击无效——其实是被新层叠上下文挡住了事件流 - 调试方法：临时删掉父级的
transform或opacity，看灰度是否恢复 - 稳妥做法：避免对整个
body应用filter，改用 class 控制具体img或容器 - 注意：SVG 内嵌图片、
background-image中的 PNG 也会受filter影响，但 canvas 绘制的内容不受影响
移动端性能卡顿？灰度不是免费的
grayscale() 是 GPU 加速操作，但在低端 Android 设备（如联发科 Helio P22）或 iOS 14 以下系统上，连续应用多个滤镜（比如同时加 blur(1px) 和 grayscale(80%)）会导致帧率骤降。
- 单图使用
grayscale(100%)通常没问题，但整页几十张图同时启用，务必加will-change: filter提前提示渲染引擎 - 慎用动画：从
grayscale(0%)到grayscale(100%)的过渡在部分安卓 WebView 中会闪烁，建议用opacity配合切换 class 替代 - 如果只是“禁用状态”示意（如按钮图标变灰），优先考虑用 CSS 变量控制
color和border-color，比滤镜更轻量
真正麻烦的从来不是写那一行 filter，而是它悄悄改变层叠顺序、在旧 Safari 里沉默、在低端机上拖慢滚动——这些点不提前踩一遍，上线后 debug 才是大头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
