直接用 background-color 设置按钮背景色时，必须成对设置 color 并显式声明 border: none；应使用类选择器（如 .btn-primary）而非标签选择器，避免样式污染；需定义 :hover、:active、:focus 状态并添加 transition；深色模式应通过 css 自定义属性配合 media 查询和 js 监听实现兼容性适配。
直接用 background-color 就能设，但别一上来就写 button { background-color: #007bff !important; } —— 后续换主题、加状态样式时会卡死。
button 背景色必须配文字色和边框
只改背景不调文字颜色，容易出现白字压在浅色背景上、或黑字陷进深色背景里。浏览器默认按钮有边框和阴影，border: none 得显式写，否则不同浏览器渲染不一致。
-
background-color和color必须成对设置，推荐用 WCAG 对比度检测工具扫一遍 - 去掉默认边框要写
border: none，不能只靠background-color覆盖 - 移动端点击区域太小？补上
padding，至少padding: 8px 16px
class 选择器比标签选择器更安全
写 button { background-color: red; } 看似省事，但一旦页面里混用了 <input type="button"> 或第三方组件的 button，样式就全乱了。用类名控制边界更稳。
- 给按钮加 class：
<button class="btn-primary">提交</button> - 对应 CSS 写
.btn-primary { background-color: #007bff; color: white; } - 避免用
!important，要用就靠特异性：比如.btn-primary:hover放在基础样式后面
hover / active 状态必须手动定义
浏览器不会自动给自定义背景色的按钮加悬停反馈。:hover 不写，用户点下去没视觉响应；:active 不写，按住不放时按钮“卡住”不动。
-
.btn-primary:hover { background-color: #0056b3; }（比基础色深 20%） -
.btn-primary:active { background-color: #00408c; }（再深一点，模拟按下感） - 加
transition: background-color 0.2s ease;让变色不突兀 - 注意：
:focus也得留，键盘用户依赖它，别用outline: none一删了之
深色模式下 background-color 不能硬切
光靠 @media (prefers-color-scheme: dark) 切背景色，安卓 WebView 和旧版 Safari 可能不认，而且用户中途切换系统主题，页面不会重绘。
- 基础色用 CSS 自定义属性：
:root { --btn-bg: #007bff; } - 在
@media里只改变量：@media (prefers-color-scheme: dark) { :root { --btn-bg: #1a56db; } } - JS 检测变化并触发重绘：
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...) - 别忘了测试“浅底深字”这种混合场景，纯黑背景配纯白文字反而刺眼
真正麻烦的不是设颜色，而是让颜色在各种状态、设备、主题、交互路径下都保持可用——background-color 只是入口，后面一串依赖得全跟上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
