必须显式声明transition: filter 0.3s ease并写在默认状态中，否则hover时filter切换为瞬时硬切；需统一使用grayscale(0)→grayscale(1)等数值型参数，避免混用none或关键词，且图片须有固定尺寸防抖动。
hover 时用 filter 实现黑白过渡，但必须加 transition
直接写 filter: grayscale(100%) 在 :hover 里不会动——CSS 不会自动补间动画。得显式声明过渡属性，否则切换是瞬时的。
-
filter是可动画属性，但仅限于数值型值（如grayscale(0)→grayscale(1)），不能对grayscale和sepia这类关键词混用 - 推荐写法：
transition: filter 0.3s ease;，加在原始元素上（不是 :hover 里） - 别用
all 0.3s，会拖慢渲染；只过渡filter更精准、性能更好
为什么图片悬停后变灰又闪一下？检查是否触发了重排
常见原因是图片没设宽高，或父容器用了 display: inline 类布局。浏览器在应用 filter 时若需重新计算布局，就可能造成闪烁或抖动。
- 给
<img alt="怎么用CSS将彩色图片在鼠标悬停时平滑转为黑白效果？" >显式设置width和height（或用aspect-ratio） - 避免父元素用
float或inline-block配合未定尺寸图片 - 加
will-change: filter;到图片上能提示浏览器提前升层，但别滥用——只在有明显卡顿的场景加
兼容性要点：Safari 和旧版 Edge 对 filter 的支持边界
grayscale() 在 Safari 6.1+、Edge 13+ 支持良好，但 Safari 15.4 之前不支持 filter 在 :hover 中的硬件加速，动画可能掉帧。
- 稳妥写法：同时写标准和
-webkit-前缀（虽然现代浏览器已不需要，但部分 iOS WebView 仍依赖）img { filter: grayscale(0); -webkit-filter: grayscale(0); }<br>img:hover { filter: grayscale(1); -webkit-filter: grayscale(1); } - IE 完全不支持
filter（它自己的filter是另一套已废弃语法），别为 IE 做降级——用@supports (filter: blur(1px))包一层更实际 - 如果要支持 Firefox 34 以下，只能用 SVG 滤镜或 JS 操作 canvas，成本远高于收益
想让黑白更“干净”，别只用 grayscale(1)
grayscale(1) 只去色，保留对比度和噪点，有时看着发灰发脏。加一点 brightness() 或 contrast() 能改善观感。
立即学习“前端免费学习笔记（深入）”；
- 常用组合：
filter: grayscale(1) brightness(0.95) contrast(1.05); - 注意顺序：多个函数按从左到右执行，
grayscale必须在最前，否则亮度/对比度调整的是彩色图像 - 数值微调很关键：brightness 超过 1.1 容易过曝，contrast 超过 1.2 可能断层，建议在真实图上试 0.05 步进
