真正可控的禁用按钮方案需组合 filter: grayscale(0.8) + pointer-events: none + 原生 disabled 属性；button:disabled 伪类对 filter 渲染存在兼容断层，须确保 dom 为 ；transition 必须显式声明 filter 和 opacity；还需同步语义（disabled 属性）、交互（cursor: not-allowed、js 防误触发）及高对比度模式 fallback。
直接用 opacity 变灰不可靠——它不统一灰度、挡不住鼠标穿透、辅助技术也难识别。真正可控的做法是组合 filter: grayscale() + pointer-events: none + 原生 disabled 属性，三者缺一不可。
button:disabled 为什么 filter 不生效？
浏览器对原生 disabled 元素的样式渲染有保留策略，尤其 iOS Safari 和部分安卓 WebView 会跳过 filter。这不是你写错了，而是 DOM 状态和 CSS 渲染层之间的兼容断层。
- 检查最终渲染的 DOM：必须是
<button disabled></button>，而不是<button disabled></button>或自定义组件上挂的 props -
button:disabled仅匹配原生表单控件，<div> 或封装过的按钮组件根本不会触发该伪类 <li>打开 DevTools 手动删掉 <code>disabled属性，看灰度是否同步消失——这是验证是否真由该伪类控制的最快方式 - 写成
transition: filter 0.2s ease，不是all，也不是transform - 建议加
opacity一起过渡：transition: filter 0.2s ease, opacity 0.2s ease，避免启停突兀 - 值推荐用
grayscale(0.8)而非grayscale(1)—— 全灰在浅色背景上易发糊，0.8 更柔和且可读性高 - DOM 层：确保
button.disabled = true（JS）或<button :disabled="isDisabled"></button>（Vue），React 中用disabled={isDisabled}，别漏掉属性透传 - CSS 层：除了
filter，必须加cursor: not-allowed；若用了pointer-events: none，注意它会同时禁用焦点，键盘用户无法跳过，慎用 - 行为层：JS click handler 开头加
if (el.disabled) return，防止逻辑误执行
filter: grayscale() 必须显式声明 transition
transition: all 0.3s 对 filter 常常无效，Safari 和旧版 Chrome 尤其明显。浏览器默认不为 filter 启用过渡动画，必须单独指定。
禁用状态不能只靠视觉，必须同步语义与交互
光变灰，按钮依然能被 Tab 聚焦、被屏幕阅读器读作“可用”，用户按回车照样触发事件。这不是样式问题，是状态脱节。
最易被忽略的是高对比度模式（@media (forced-colors: active)）下 filter 会被系统强制忽略，所以一定要显式设置 color 和 background-color 作为 fallback。灰度只是表层，语义一致才是禁用真正的底线。
