直接用 border-radius 即可实现圆角按钮，但需注意：统一四角用单值（如 8px），正圆需宽高相等且设为 50%，多角控制用四值顺时针书写，避免 100%；须配合 display: inline-block/block 和 padding 控制尺寸与比例；hover 需 cursor:pointer 及视觉反馈，焦点样式不可省略，响应式需 padding+min-width+aspect-ratio 组合。
直接用 border-radius 就能搞定，不需要 JS 或额外库 —— 但值设错、宽高不匹配、或忽略交互细节，按钮就会“看起来像圆角，点起来不像按钮”。
border-radius 值怎么填才不翻车
填数字还是百分比，取决于你要的是“微圆角”还是“真圆形”：
- 统一四角：写一个值，比如
border-radius: 8px—— 所有角都切掉 8px 的直角，适合常规按钮 - 想做正圆按钮：必须同时满足两个条件：
width和height相等，且border-radius: 50%；写成border-radius: 20px会失效（因为不是按比例算的） - 只改某几个角：用四个值顺时针写，如
border-radius: 6px 0 12px 0表示左上和右下圆角，其余直角 - 别写
border-radius: 100%—— 它不会更圆，反而在某些旧浏览器里表现异常
button 元素本身要“撑得开”，不然圆角没意义
button 默认是 inline 元素，width/height 设了也不生效。常见错误是只加 border-radius，结果按钮还是窄窄一条，圆角根本看不见。
- 加
display: inline-block或display: block，才能控制尺寸 - 用
padding替代固定宽高更灵活，比如padding: 10px 24px，再配border-radius: 8px，文字多时也自动适应 - 如果用
padding做圆形按钮，得确保左右 padding ≈ 上下 padding × 2（比如padding: 16px 32px），否则容易拉成椭圆
hover 动效和可访问性容易被忽略
圆角按钮常配悬停变色，但只改 background-color 不够 —— 用户可能根本没意识到这是个可点击元素。
- 加
cursor: pointer，鼠标移上去立刻有反馈 -
:hover里至少动一个属性：背景色、阴影（box-shadow）、或边框（border），避免纯颜色切换导致视觉跳变 - 别省略
outline: none后的替代方案：键盘 Tab 焦点必须有可见样式，比如用focus-visible加一圈虚线或阴影 - 文字颜色对比度不够？用
color-scheme: light dark或媒体查询适配系统主题，别让圆角按钮在深色模式下“消失”
真正卡住人的不是“怎么画圆角”，而是按钮在不同设备上尺寸是否一致、焦点是否可识别、缩放后是否变形 —— 这些得靠 padding + min-width + aspect-ratio（如需响应式正圆）组合来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
