单独使用 --opacity-disabled 危险，因它仅控透明度，无法兼顾禁用态所需的颜色、光标、指针事件及wcag对比度合规，易致可访问性失效、视觉不一致与跨浏览器渲染异常。
不能只靠一个 --opacity-disabled 变量就搞定禁用样式。 它最多只能控制透明度，而禁用态需要同时处理颜色、光标、指针事件、对比度合规等多个维度，变量必须成体系设计，否则改一个值会连锁破坏可访问性或视觉一致性。
为什么单独用 --opacity-disabled 很危险
直接写 button:disabled { opacity: var(--opacity-disabled, 0.45); } 看似简洁，但实际埋了三个坑：
- opacity 会把文字、图标、边框、阴影全部淡化，导致 WCAG 对比度不达标（尤其小字号按钮）
- 它无法替代
cursor: not-allowed—— 浏览器不会因为 opacity 变化就自动改鼠标样式 - 在 iOS Safari 和部分安卓 WebView 中，
:disabled本身对 opacity 的支持就不稳定，常出现“禁用了但看起来没变”的情况
--opacity-disabled 该和哪些变量一起用
真正可控的禁用样式，至少要配齐这四类变量，并在对应伪类中显式引用：
-
--btn-color-disabled：专用于button:disabled { color: var(--btn-color-disabled); } -
--btn-bg-disabled：用于button:disabled { background-color: var(--btn-bg-disabled); } -
--btn-cursor-disabled：用于button:disabled { cursor: var(--btn-cursor-disabled, not-allowed); } -
--btn-pointer-events-disabled：用于button:disabled { pointer-events: var(--btn-pointer-events-disabled, none); }
注意：--opacity-disabled 不建议作为主控变量；如果非要用，也只应作为兜底 fallback，比如 opacity: var(--opacity-disabled, 0.45);，且必须和上面四条共存，不能替代它们。
如何让 --opacity-disabled 在深色模式下也生效
深色模式下直接复用浅色禁用值（如 opacity: 0.45）往往会让按钮“糊成一片”，因为背景变暗后，同样透明度下文字更难看清。正确做法是分主题重设变量：
- 在
:root里定义默认值：--opacity-disabled: 0.45; - 在
@media (prefers-color-scheme: dark)块内覆盖：:root { --opacity-disabled: 0.55; } - 但再次强调：这个值仍需配合
--btn-color-disabled和--btn-bg-disabled单独调优，不能指望 opacity 自动适配
更稳妥的深色禁用方案是完全放弃 opacity，改用明确定义的禁用色对（如 #6c757d 文字 + #343a40 背景），这样对比度可控、渲染稳定、无障碍友好。
Tailwind 用户别误以为 disabled:opacity-50 就够了
Tailwind 默认不启用 disabled 变体，即使你写了 disabled:opacity-50，编译后也不会生成任何 CSS —— 这不是 bug，是配置缺失。
- v3+ 项目必须在
tailwind.config.js中添加require('@tailwindcss/forms')插件，否则disabled:前缀全失效 - 即使启用了，
disabled:opacity-50仍只是设置 opacity，不带cursor、不加pointer-events、不处理深色模式，属于半残缺方案 - 自定义组件（如
<mybutton></mybutton>）根本匹配不到:disabled，得用data-disabled+addVariant手动扩展
真正上线的禁用按钮，从来不是单靠一个变量或一个 class 控制的；它是 HTML 属性、CSS 变量、伪类选择器、可访问性属性四者对齐的结果。漏掉任意一环，用户都可能点错、读不清、或读屏器报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
