border-radius: 6px是最稳妥的起点，小按钮用4px、大按钮可用8px；单层阴影box-shadow: 0 2px 4px rgba(0,0,0,0.1)足够，hover时仅增大y偏移与透明度；必须补全:active状态实现点击反馈；文字与背景对比度须≥4.5:1，借助工具验证。
按钮圆角值设多少才自然
圆角太小像没处理，太大又显得软塌塌。在初级项目里，border-radius: 6px 是最稳妥的起点——既打破直角的生硬感，又保持按钮的结构清晰。如果按钮尺寸偏小（比如 24px 高），可降到 4px；若用于卡片操作或主行动按钮（40px+ 高），8px 也常见。别用 50% 做圆形按钮，除非图标按钮且有明确语义（如播放、关闭）。
阴影该加几层？为什么 hover 后阴影变深反而更假
单层 box-shadow 就够用，多层阴影在初级项目中容易失控。推荐写法：box-shadow: 0 2px 4px rgba(0,0,0,0.1)。hover 时只增强 y 偏移和透明度，比如改成 0 4px 8px rgba(0,0,0,0.15)。很多人误以为“阴影越重越有按下感”，其实错在同时加大了模糊半径（blur），导致边缘发虚、脱离容器。真实按压是向下位移+轻微形变，不是“变朦胧”。
:hover/:active 状态漏写会怎样
漏写 :active 是初级项目最常被忽略的细节：用户点击瞬间按钮毫无反馈，体验断层。必须补上，哪怕只是简单下移 1px 和微调背景色：
button {
transition: all 0.15s ease;
}
button:hover {
background-color: #4a90e2;
}
button:active {
transform: translateY(1px);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
注意三点：
• transition 要写在常态上，不是 hover 里
• :active 的 transform 比改 margin-top 更可靠（不触发重排）
• 移动端需加 cursor: pointer，否则部分安卓浏览器不触发 :hover
文字颜色和背景色对比度不够怎么办
别凭感觉调色。用浏览器开发者工具的无障碍检查（Lighthouse 或 Elements 面板的 contrast ratio 提示），确保文本与背景对比度 ≥ 4.5:1。例如浅蓝背景 #4a90e2 搭配白字 #ffffff 是合格的（对比度 6.8:1），但换成灰字 #666 就不合格（仅 2.3:1）。如果设计稿给的主色太浅，宁可加一层深色描边或调整背景明度，也不要牺牲可读性。
0.2s，阴影变化别超过 2px 偏移，圆角值在整个系统里保持统一。一两个按钮好看不难，难的是整套按钮在不同尺寸、颜色、禁用状态下都呼吸一致。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
