filter: gray 是 ie6–ie9 的已废弃私有语法，现代浏览器完全不支持；标准写法唯一为 grayscale(1) 或 grayscale(100%)，需配合 -webkit-filter 兼容旧版 safari，并用 @supports (filter: grayscale(0)) 安全检测。
gray() 函数根本不存在于任何主流浏览器中。
CSS 滤镜规范里只有 grayscale()，没有 gray()。你看到的 filter: gray 是 IE6–IE9 的**已废弃私有语法**，现代浏览器（包括 Edge 16+）完全不支持，Safari 和 Chrome 解析到它会直接忽略整条声明，甚至在 DevTools 中标为无效。
为什么有人写 filter: gray？
这是历史遗留写法：IE6–9 用 filter: gray 或 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) 实现灰度。但该语法从未进入标准，W3C 从未定义 gray() 函数。所有现代 CSS 文档、MDN、CanIUse 都查不到 gray() —— 它不是函数，也不是合法值。
实际项目中该用什么？
-
grayscale(1)或grayscale(100%)是唯一标准写法，Chrome/Firefox/Edge/Safari（15.4+）均支持 - 旧版 Safari（iOS 9–12）只认
-webkit-filter: grayscale(1)（注意是无单位浮点数，不是100%） - Firefox 10–16 只支持
filter: url(...)SVG 方案，不能用grayscale() - IE11 不支持任何
grayscale()，必须降级用progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)或 JS 替换图片
@supports 要怎么写才不翻车？
别写 @supports (filter: gray) —— 这个条件永远为 false，且会干扰后续样式解析。正确检测是：
@supports (filter: grayscale(0)) or (-webkit-filter: grayscale(0)) {
img { -webkit-filter: grayscale(1); filter: grayscale(1); }
}
注意：Firefox 10–16 会误报支持 grayscale(0)，但它实际只走 SVG fallback 路径，所以这个检测只是“避免语法错误”，不能保证功能可用。
filter: gray，就等于主动放弃现代浏览器的滤镜能力——它既不触发灰度，也不 fallback，而是静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
