使用:disabled伪类和opacity属性可控制禁用按钮的透明度，如设置opacity:0.5使按钮变灰暗，提示不可操作，同时建议配合背景色变化、文本可读性优化、cursor: not-allowed及aria-disabled提升可访问性，现代浏览器均良好支持。
在CSS中，按钮禁用时的透明度可以通过 :disabled 伪类结合 opacity 属性来控制。当按钮的 disabled 属性被设置时，浏览器会自动应用 :disabled 样式，我们可以利用这一点来自定义其外观，包括调整透明度。
使用 :disabled 和 opacity 调整禁用按钮的透明度
:disabled 选择器可以选中处于禁用状态的表单元素，比如 、 等。配合 opacity 属性，可以降低按钮的视觉权重，使其看起来“不可点击”。
对应的CSS：
button:disabled {
opacity: 0.5;
}
这样，当按钮被禁用时，它的透明度会变为50%，呈现出灰暗的效果，提示用户当前不可操作。
立即学习“前端免费学习笔记（深入）”；
注意事项与增强体验
仅靠透明度可能不足以清晰传达按钮状态，建议配合其他样式提升可访问性：
- 改变背景颜色或添加灰色滤镜
- 确保文本依然可读（避免过低的对比度）
- 设置
cursor: not-allowed提供鼠标反馈 - 对于屏幕阅读器用户，确保
aria-disabled="true"正确使用（如需语义增强）
兼容性说明
:disabled 在现代浏览器中支持良好，包括 Chrome、Firefox、Safari 和 Edge。对于旧版IE，部分行为可能不一致，但基本的 opacity 支持没有问题。
基本上就这些。通过简单组合 :disabled 和 opacity，就能有效控制禁用按钮的视觉表现。
