禁用按钮上filter: grayscale(1)不生效是因浏览器对disabled元素的样式限制；应改用is-disabled类控制，配合filter、pointer-events: none和tabindex="-1"实现兼容灰度效果。
为什么 filter: grayscale(1) 在禁用按钮上不生效？
直接给 disabled 按钮加 filter: grayscale(1) 常常没反应，因为原生 <button disabled></button> 会忽略大部分 CSS 样式（包括 filter），尤其在 iOS Safari 和部分安卓 WebView 中更明显。这不是写法错，是浏览器对禁用态元素的渲染限制。
- 禁用按钮默认被系统接管样式，
filter属于“非继承性且易被跳过”的属性 -
pointer-events: none或opacity: 0.5能生效，但不是灰度滤镜效果 - 真正起作用的是：**放弃依赖
disabled属性本身来触发样式，改用类名控制**
正确做法：用 is-disabled 类替代 disabled 属性
把禁用逻辑从 HTML 属性移到 CSS 类，既能保留 filter 生效条件，又可统一控制交互行为。
- HTML 中移除
disabled，改为添加自定义类：<button class="btn is-disabled">提交</button> - CSS 中定义：
.is-disabled { filter: grayscale(1) contrast(0.8); pointer-events: none; } - JavaScript 中需同步处理：点击时检查
el.classList.contains('is-disabled')，而不是el.disabled - 额外建议加
contrast(0.8)—— 单纯grayscale(1)在浅色背景上可能显得发灰发糊，降低对比度能强化“不可用”感知
filter: grayscale() 在不同设备上的兼容性差异
iOS 15+ 和 Android Chrome 90+ 对 filter 支持良好，但老版本或某些定制 WebView（如微信内置浏览器）仍可能不渲染或性能卡顿。
- 测试发现：iOS 14 及以下 Safari 需要配合
transform: translateZ(0)或will-change: filter才能触发硬件加速并显示滤镜 - 低端安卓机上连续切换
grayscale值可能导致重绘延迟，建议用transition: filter 0.2s ease而非0.05s - 如果必须支持极旧环境，备选方案是用
background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2))叠加灰色蒙层，但无法影响文字和子元素颜色
如何让灰色滤镜同时作用于按钮内的图标和文字？
如果按钮里嵌了 <svg></svg> 或 <img>，只给 button 加 filter 通常够用；但若图标用了 fill 或 color 动态着色，就得确保它们不受父级 filter 干扰失效。
- SVG 内联图标：默认继承父级
filter，无需额外操作 - 使用
<use href="#icon"></use>的 symbol 引用：需确认 SVG 定义在同域且未设style="filter: none" - 文字颜色异常（比如变太暗）：可微调
filter值，例如grayscale(0.9) brightness(0.95)，比全灰更易读 - 避免在按钮上同时用
filter和backdrop-filter—— 某些安卓机型会直接丢弃后者
is-disabled 和 pointer-events: none，键盘 Tab 仍可能聚焦到该按钮。记得同步加 tabindex="-1"。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
