直接用 background-color，别用已废弃的 bgcolor；单按钮调试用内联 style，多按钮必须用 class + css；js 改色操作 element.style.backgroundcolor，渐变需用 background: linear-gradient()。
直接用 background-color 就行，别碰 bgcolor —— 后者在 HTML5 中已废弃，写了也白写，还可能触发验证警告。
内联 style 是最快见效的方式
适合单个按钮快速调试或原型阶段。写法简单，但必须注意语法细节：
-
background-color必须带-color，写成background或bgcolor都无效 - 颜色值支持
#4CAF50、rgb(76, 175, 80)、red，但rgba()在老浏览器（如 IE11）里不渲染透明度 - 漏掉分号（如
style="background-color: #f00; color: white"缺末尾分号）会导致后续样式失效 - 别只设背景色忘了
color，否则文字可能和背景同色而不可见
示例：<button style="background-color: #e74c3c; color: white;">删除</button>
多按钮必须用 class + CSS，否则维护会爆炸
三个以上按钮共用同一套配色时，硬编码每个 style 等于给自己埋雷。CSS 类才是正解：
- 定义类时同步重置
border: none，否则默认灰色边框会割裂背景色 - 加上
padding和border-radius，不然按钮看起来“贴边”又僵硬 - 伪类状态（
:hover、:active、:focus）必须单独写，否则鼠标悬停或键盘聚焦时颜色会退回浏览器默认浅灰 - 避免用
!important强覆盖——它会让后续 JS 切换颜色或主题时完全失控
示例：
.btn-danger {<br> background-color: #e74c3c;<br> color: white;<br> border: none;<br> padding: 8px 16px;<br> border-radius: 4px;<br>}<br>.btn-danger:hover { background-color: #c0392b; }<br>.btn-danger:active { background-color: #a93226; }
JavaScript 动态改色时，别踩这几个坑
要用 JS 改颜色，核心是操作 element.style.backgroundColor，不是 element.backgroundColor（后者根本不存在）：
- 先确认元素存在，
document.getElementById('xxx')返回null时再调.style会报Cannot set property 'backgroundColor' of null - 如果按钮有启用/禁用状态，优先用
classList.add()/classList.remove()切换预设 class，比反复写style.backgroundColor = 'xxx'更可控、更易测试 - 移动端 Safari 对
body背景响应慢，改按钮本身颜色不受影响，但若涉及页面主题切换，得走data-theme+ CSS 变量方案，而不是直接改body.style.backgroundColor
正确写法：document.querySelector('.submit-btn').style.backgroundColor = '#2ecc71';
渐变背景不能靠 background-color
background-color 只能填纯色。要渐变，必须用 background: linear-gradient(...)，且务必配 border: none，否则边框会盖住渐变边缘：
- 对角线双色：
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); - 垂直渐变更稳，斜角在某些安卓 WebView 里渲染异常
- 渐变色搭配文字时，建议加
text-shadow或确保足够对比度，否则可读性崩塌
错误写法：background-color: linear-gradient(...) —— 这句完全无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
