不能在js中动态设置button背景渐变，因会强制触发layout→paint导致卡顿闪烁，且无法即时可逆反馈、破坏无障碍语义；正确做法是用:hover和:active纯css状态组合实现。
表单提交按钮的背景渐变效果不能靠“提交瞬间触发”，而是必须用 CSS :hover 和 :active 状态组合模拟交互反馈；直接监听 submit 事件改 background 会闪、卡、语义错乱，且移动端无 hover。
为什么不能在 JS 中动态设置 button 的 background 渐变？
浏览器对表单控件（尤其是 <button type="submit"></button>）的样式重绘非常敏感。JS 修改 style.background 会强制触发 layout → paint，低配设备上明显卡顿或闪烁；更重要的是，用户点击后到表单真正提交之间有网络延迟，视觉反馈必须即时、可逆，而 JS 控制无法自然还原到 :hover 或默认态。
- 不要写
form.addEventListener('submit', () => btn.style.background = 'linear-gradient(...)') - 不要用
btn.classList.add('loading')再配 CSS 动画——这会让按钮失去“正在处理”的语义（无障碍阅读器读不出状态） - 真正需要 loading 态时，应禁用按钮 + 替换文字 + 用
::after叠加旋转图标，而非改背景渐变
button:hover 渐变翻转不闪屏的关键三步
闪屏本质是渐变重绘跳变，不是性能问题，而是 CSS 属性过渡失控。
- 必须显式声明
transition: background 0.3s ease，绝不能写transition: all 0.3s——否则边框、阴影、文字颜色全参与过渡，拖慢响应 - 渐变方向参数（如
135deg）在 :hover 前后必须完全一致，只调换颜色顺序；写成linear-gradient(135deg, #4a90e2, #50c878)→linear-gradient(45deg, #50c878, #4a90e2)会导致方向跳变，视觉像“撕裂” - 确保父容器没有
will-change: transform或transform: translateZ(0)意外触发层叠上下文，否则部分安卓 WebView 会丢掉渐变插值
button:active 在 iOS/Android 上变灰？补全这三行就解决
移动端点击瞬间背景“回退成白/灰”，不是 bug，是开发者漏写了 :active 样式，且未覆盖系统默认高亮行为。
- 加
button:active { background: linear-gradient(135deg, #50c878, #4a90e2); }—— 与 :hover 同色，但确保它在 CSS 中位置比 :hover 靠后（CSS 层叠优先级） - 加
-webkit-tap-highlight-color: transparent;到 button 上，干掉 iOS Safari 默认半透明遮罩 - 加
outline: none;，防止部分安卓浏览器聚焦时叠加虚线框压住渐变
表格里带渐变的提交按钮怎么避免被 border-collapse 裁掉？
如果按钮嵌在 <table> 或 <code><td> 里，且表格用了 <code>border-collapse: collapse，按钮的渐变边缘可能被裁剪——这不是按钮问题，是 td 的渲染盒模型被压缩了。
- 给按钮父级
<td> 加 <code>padding: 6px，再设background-clip: padding-box，把渐变限制在内边距区 - 按钮自身加
border: none; box-sizing: border-box;，避免 Firefox 下默认边框干扰尺寸计算 - 绝对不要给
<tr> 或 <code><table> 直接写 <code>background: linear-gradient()——<tr> 不是真实渲染盒，IE11/Safari 会 fallback 到第一色，Chrome 也可能错位 <p>最易忽略的点：所有渐变声明必须用 <code>background-image显式书写，而不是background简写。一旦<button></button>有其他背景（比如图标雪碧图），background: linear-gradient(...)会清空整个背景栈，导致图标消失。正确写法永远是background-image: linear-gradient(...); background-color: #fff;—— 颜色作为降级兜底，且不干扰渐变绘制逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
