appearance: none 必须声明，否则 border-radius、background-color 在 safari 和部分安卓 webview 中失效；需配合 -webkit-appearance 和 -moz-appearance 前缀实现三端兼容，并处理 hover/active/disabled 状态、点击区域、对齐、深色模式及可访问性。
必须先写 appearance: none
不加这句，border-radius、background-color 在 Safari 和部分安卓 WebView 里根本不起作用。浏览器的 UA 样式会强行覆盖你的设置，比如 Safari 给 button 加圆角、Chrome 塞阴影、旧版 IE 塞内边距——你写的 CSS 是叠加，不是替换。
正确写法要三端兼容：
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
-
font: inherit防止 Safari 对input[type="submit"]字体继承异常 -
padding: 0比height更可靠：用padding控制按钮大小，文字才不会被截或错位 - 漏掉任意一个
appearance前缀，Firefox 或 Safari 就可能回退到默认样式
:hover 和 :active 状态不能只改颜色
只写 background-color 变化，用户感知不到操作反馈。移动端没 :hover，:active 还得配合 touch-action: manipulation 才能消除点击延迟。
-
:hover必须配transition：比如transition: background-color 0.2s, transform 0.1s，否则颜色跳变生硬 -
:active建议加transform: translateY(1px)模拟按下感，别只调背景色 -
:disabled要单独写：opacity: 0.6; cursor: not-allowed，否则禁用后还能 hover 出颜色 - iOS Safari 对过大的
border-radius（如999px）会裁掉图标或文字，建议用12px或0.5rem
移动端按钮对齐和点击区域容易出错
按钮在手机上“看起来歪了”或“点不中”，往往不是样式写错，而是默认行为没控住。
-
display: inline-block的默认vertical-align: middle会让按钮和旁边文字对不齐，显式设vertical-align: top或改用flex - 系统默认有
-webkit-tap-highlight-color，不关掉点下去会有灰斑，加-webkit-tap-highlight-color: transparent - 按钮最小点击区域建议 ≥
44×44px，靠padding扩大，别依赖width/height - 别依赖
:hover做主交互提示，移动端得靠:active+ 视觉压感
渐变、图标、深色模式这些进阶效果怎么加
基础样式跑通后，再叠加增强效果。但要注意顺序和兼容性。
- 渐变背景用
linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)，别直接覆盖background-color，否则 fallback 失效 - 内联 SVG 图标建议用
flex居中：display: flex; align-items: center; gap: 8px，比vertical-align更稳 - 深色模式适配优先用
@media (prefers-color-scheme: dark)，而不是 JS 切换 class，避免闪屏 - 所有颜色值必须满足 WCAG 至少 AA 级对比度，特别是
:disabled状态下的文字
真正难的不是写多少行 CSS，而是每一步都得同时考虑语义、可访问性、多端表现和降级逻辑。比如 appearance: none 一漏，整个美化就白写了；touch-action: manipulation 一忘，iOS 用户点按钮就有延迟。这些细节不处理，按钮再好看也“不好用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
