必须重置 appearance 才能真正控制样式，关键代码为 -webkit-appearance: none、-moz-appearance: none、appearance: none；button[type="submit"] 比 input 更可靠；渐变背景需加 -webkit- 前缀并显式定义 :hover/:active/:disabled 状态。
必须先重置 appearance 才能真正控制样式
直接写 background-color 或 border-radius 没用——浏览器默认会给 button[type="submit"] 和 input[type="submit"] 加阴影、内边距、字体偏移甚至 3D 效果。不重置就等于在别人画好的画上涂改。
关键代码必须包含三行：-webkit-appearance: none、-moz-appearance: none、appearance: none，缺一不可。漏掉 appearance: none 会导致：
- Firefox 下
border-radius被默认边框遮盖 - Safari 中文字垂直居中偏移
- 某些安卓 WebView 忽略
background-color，只渲染渐变底纹
同时要清空 border、padding、margin，并显式写 font: inherit 和 color: inherit，否则旧版 Safari 会继承错误字体族。
button[type="submit"] 比 input[type="submit"] 更可靠
两者 DOM 行为完全不同：button 是容器元素，可嵌套 SVG、span、多行文本；input 是自闭合标签，仅靠 value 显示文字，且在部分安卓 WebView 中 :hover 支持极弱。
常见问题场景：
- 想加图标？用
button+svg或span，input做不到 - 表单里混用两种按钮？样式规则容易冲突，尤其
font-family继承异常 - 移动端点击无反馈？大概率是用了
input且没处理:active
如果已有 input[type="submit"]，别强行改；但新项目请统一用 button[type="submit"]。
渐变背景要兼容老 Safari 和微信 WebView
直接写 background: linear-gradient(135deg, #4a90e2, #50c878) 在 iOS 12 或微信内置浏览器（基于旧 WebKit）可能完全不渲染。必须加前缀 fallback：
button[type="submit"] {
background: linear-gradient(135deg, #4a90e2, #50c878);
background: -webkit-linear-gradient(135deg, #4a90e2, #50c878);
}
注意点：
- 角度推荐用数值（如
135deg），别用to top—— IE10/11 和部分安卓 4.x WebView 不支持 - 两个颜色值默认等距分布，不用写
0%, 100%，写多了反而增加解析失败风险 - hover 翻转渐变时，只调换颜色顺序，保持角度一致，否则视觉上像“撕裂”
:hover 和 :active 必须显式定义，不能省
只设 background-color 不够，用户需要即时视觉反馈。常见疏漏：
-
:hover缺少transition：加transition: background 0.3s ease，别用all，否则文字阴影、边框也会参与过渡，拖慢响应 -
:active没压感：iOS Safari 和多数安卓浏览器 tap 时不会自动加遮罩，必须手动写transform: translateY(1px)模拟按下效果 -
:disabled被忽略：必须设opacity: 0.6+cursor: not-allowed，否则用户仍会反复点击 -
:disabled:hover未覆盖：要单独写button:disabled:hover，否则悬停色会错误生效
禁用状态下的加载中按钮，不能只靠 JS 切 class，得提前在 CSS 里定义好 .loading 或 [data-loading] 的样式，否则闪屏或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
