必须重置button默认样式，因浏览器赋予其不一致的背景、边框、内边距等，导致圆角失效、阴影被遮、文字对不齐；应优先使用appearance: none清除系统级样式，再统一定义border、padding、font等，并补全:hover/:active状态及移动端适配。
button 默认样式为什么必须重置
浏览器给 <button></button> 加了一套默认样式（比如 Chrome 的浅灰背景、细边框、内边距不一致），不同浏览器还不一样。不重置就直接加 background-color 或 border-radius，经常出现边缘毛刺、文字对不齐、点击时轮廓突兀等问题。
最稳妥的做法是开头就写：
button {
appearance: none;
-webkit-appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
其中 appearance: none 是关键——它干掉系统级 UI 样式，后续所有美化才可控。漏掉这行，border-radius 在 Safari 里可能失效，box-shadow 也可能被默认边框遮住。
hover 和 active 状态怎么写才不翻车
很多人只写 :hover，但用户真正确认操作的是点击瞬间，:active 缺失会让按钮“没按下去”的感觉，尤其在移动端容易误判。
-
:hover适合做轻量反馈：背景色变深、box-shadow稍增强、或transform: translateY(-1px) -
:active必须体现“按下”：用transform: translateY(0)回弹、background-color再深一级、或加inset阴影模拟凹陷 - 别忘了加
transition：只过渡需要变化的属性，比如transition: background-color 0.2s, transform 0.1s；全写all 0.3s容易卡顿 - 移动端没有 hover，但
:active依然生效——测试时务必真机点按，别只靠鼠标悬停判断
圆角和阴影怎么配才自然
border-radius 和 box-shadow 不是数值越大越好。半径超过按钮高度一半，圆角会“撑开”文字；阴影太重则像浮在页面上，脱离内容流。
推荐组合：
- 常规按钮（高 40px）：
border-radius: 6px+box-shadow: 0 1px 3px rgba(0,0,0,0.1) - 大尺寸操作按钮：
border-radius: 12px+box-shadow: 0 2px 8px rgba(0,0,0,0.12) - 禁用状态（
disabled）：去掉box-shadow，opacity: 0.6比单纯调低background-color更安全（避免对比度不足）
注意：阴影的 blur 值别超 12px，否则边缘发虚；spread 建议为 0，除非你真要那种“发光”效果。
图标按钮文字对不齐怎么办
用 <svg></svg> 或 <i></i> 插图标时，常见文字下沉、图标偏高。根本原因是行内元素默认按 baseline 对齐，而图标往往没设 vertical-align。
解决方法很直接：
- 给图标加
vertical-align: middle（不是top或bottom） - 按钮整体设
line-height: 1，再用padding控制高度，避免行高干扰 - 更稳的写法是改用 Flex 布局：
display: inline-flex; align-items: center; gap: 8px，图标和文字自动居中且间距可控 - 别依赖
font-size调图标大小——SVG 应该用width/height，字体图标用font-size，混用会导致缩放错位
最后提醒一句：所有颜色值必须检查 WCAG 对比度，尤其是浅色背景上的灰色按钮——肉眼觉得“差不多”，工具可能报 AA 不达标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
