按钮圆角需匹配设计语言：极简风用12px–24px，商务风用4px–8px或直角，卡片式UI常用8px或12px；应参照设计系统或主容器圆角定基准，并按语义分层——主操作10px、次要8px、图标按钮4px–6px；响应式下移动端推荐clamp(4px,1.5vw,8px)，深色模式可微减1px，禁用态保持圆角一致。
按钮圆角不是调个数值就完事，关键得和整体设计语言对齐——比如极简风配大圆角（12px–24px），商务感强的系统常选小圆角（4px–8px）或直角，而卡片式UI往往统一用 8px 或 12px 保持呼吸感。
看设计系统定基准值
先确认项目是否已有设计规范。如果有 Figma 或 Sketch 的设计系统文档，直接查「Button」组件的 border-radius 标准值；如果没有，建议以主容器（如卡片、模态框）的圆角为参照——比如卡片用了 8px，按钮也统一用 8px，视觉上自然形成层级关联。
按语义区分圆角层级
同一页面中不同重要性的按钮，可通过圆角细微变化传递信息：
- 主操作按钮（如“提交”“下单”）：用稍大一点的圆角（如 10px），显得更友好、可点击感强
- 次要按钮（如“取消”“返回”）：与主按钮一致或略小（如 8px），保持节奏不跳脱
- 图标按钮 / 微操作（如删除、编辑图标）：可用 6px 或 4px，更紧凑，避免视觉膨胀
适配响应式与高对比场景
小屏下按钮变窄，过大的圆角（如 20px）容易让左右弧度“吃掉”文字空间，导致文字被裁或留白失衡。建议：
立即学习“前端免费学习笔记（深入）”；
- 移动端用 clamp(4px, 1.5vw, 8px) 动态控制，兼顾可读性与一致性
- 深色模式下若背景对比强烈，可微调圆角减 1px（如从 8px → 7px），削弱硬边感，提升柔和度
- 禁用状态按钮建议保持相同 border-radius，仅改 opacity 和 color，避免样式断裂
基本上就这些——圆角是细节，但正是这些细节把按钮真正“嵌入”到界面里，而不是浮在上面。
