hover时filter: grayscale(0)不生效，主因是遗漏transition声明；需同时设置初始态（如grayscale(1)）、transition: filter 0.3s ease，并避免all过渡、内联样式覆盖及IE兼容问题。
hover 时 filter: grayscale(0) 不生效？检查是否遗漏 transition
直接写 filter: grayscale(0) 却没过渡效果，大概率是忘了加 transition。CSS filter 是可过渡属性，但必须显式声明——它不会自动继承父级或默认过渡。
- 必须给元素同时设置初始态（如
filter: grayscale(1)）和transition: filter 0.3s ease - 过渡时间建议不小于
0.2s：太短人眼难察觉，太长则响应迟滞 - 避免用
all做过渡目标（如transition: all 0.3s），会意外触发重排或拖慢性能 - 若用 JS 动态切换 class，确保 class 切换前后都带
filter声明，否则浏览器可能跳过过渡
grayscale 过渡在 Safari 上卡顿？启用 will-change 或改用 backdrop-filter
Safari（尤其是旧版 macOS/iOS）对 filter: grayscale() 的硬件加速支持不稳定，hover 瞬间可能出现掉帧或闪烁。
- 临时缓解：加
will-change: filter，但仅在 hover 前一刻启用（例如用:hover触发），避免长期占用 GPU 内存 - 更稳方案：改用
backdrop-filter: grayscale()+ 半透明白色遮罩层模拟灰度，再移除遮罩实现“上色”，适合背景图场景 - 注意
backdrop-filter在 Safari 9+ 支持良好，但 Chrome 需开启实验性 flag（chrome://flags/#backdrop-filter）才可用
图片本身带内联 style 或 !important 覆盖了 filter？优先级必须理清
常见于 CMS 输出的图片、React 组件内联样式或第三方库注入的 style，导致你写的 filter 被忽略。
- 用浏览器 DevTools 检查 computed styles，确认
filter是否被 strikethrough（划掉） - 若存在内联
style="filter: ..."，CSS 规则需提高权重：用!important（不推荐）或改用更具体的选择器（如.card img而非img） - React/Vue 中，避免在模板里写
style={{ filter: 'grayscale(1)' }}，应统一交由 className 控制，方便过渡
需要兼容 IE？grayscale 滤镜根本不可用，得换方案
filter: grayscale() 在 IE 完全不支持（包括 IE11），且 IE 不支持 transition 对 filter 的作用。强行兼容只会增加维护成本。
立即学习“前端免费学习笔记（深入）”；
- 明确业务需求：如果 IE 用户占比低于 0.5%，建议直接放弃支持，用现代方案
- 若必须兼容，可用 SVG 滤镜替代（
<fecolormatrix type="matrix" values="..."></fecolormatrix>），但无法 transition，只能 JS 切换两套 SVG 定义 - 更现实的做法：用 JS 检测
CSS.supports('filter', 'grayscale(0)')，不支持时 fallback 为 opacity 渐变或静态彩色图
真正难处理的不是怎么写 transition，而是灰度/彩色状态在不同交互路径下（比如鼠标移入、键盘焦点、屏幕阅读器模式）是否保持一致——这点容易被忽略，但直接影响可访问性。
