直接给 button 加 border-radius 能生效，但常因未处理宽高、边框、溢出和框架重置导致“看不见”或“变椭圆”；做正圆按钮需宽高相等、border-radius: 50% 且无干扰内边距。
直接给 button 元素加 border-radius 就能生效，但多数人卡在圆角“看不见”或“变椭圆”上——根本原因不是不会写，而是没处理好宽高、边框、溢出和框架重置这四点。
为什么 button 的 border-radius 有时不显示
常见现象是写了 border-radius: 8px 却还是直角。这不是 CSS 失效，而是被其他样式盖住了：
-
button默认有系统自带的border（比如 Chrome 的 2px 虚线），它会压住圆角边缘；解决方法是显式写border: none或border: 1px solid transparent - 父容器设了
overflow: hidden，而按钮内容（如文字、图标）撑出了盒模型，圆角被裁掉；检查父级是否意外加了该声明 - 用了 Bootstrap、Tailwind 等 UI 框架，它们通过
reset或base style强制清除了圆角；必须用更高权重覆盖，例如加!important或用更具体的选择器如.my-btn:not([disabled]) - 某些旧版 Safari 或 iOS WebView 对
button的渲染有 bug，需补-webkit-appearance: none才让border-radius生效
做正圆按钮必须满足的三个条件
想让 button 变成标准圆形（不是椭圆），光写 border-radius: 50% 不够：
- 宽度和高度必须相等：写死
width: 48px; height: 48px，或用aspect-ratio: 1 / 1（注意兼容性：Safari 15.4+ 支持） -
border-radius必须是50%，不能写成24px（否则响应式缩放时失圆） - 确保没有内联 padding 或 line-height 导致实际尺寸偏离；如果用文字内容，建议改用
padding: 12px+font-size: 14px+line-height: 1控制紧凑度
border-radius 四种常用写法的实际效果差异
别只记语法，不同写法直接影响按钮形状和维护成本：
-
border-radius: 6px→ 四角统一圆角，最常用，适合大多数操作按钮 -
border-radius: 50%→ 强制四角按宽高比例计算，只有宽高相等时才是正圆；宽高不等就变椭圆角，适合图标按钮 -
border-radius: 8px 4px 0 12px→ 顺时针依次为左上、右上、右下、左下；可用于“半圆角”或品牌定制风格 -
border-radius: 4px / 8px→ 斜杠前是水平半径，后是垂直半径；生成椭圆弧，极少用，容易引发误解
移动端圆角按钮要额外注意的两件事
触摸体验比桌面端更敏感，圆角不只是视觉问题：
- 圆角过小（如
2px）在手指点击时几乎无感知，建议最小用4px，主流用8px或12px - 避免用
clip-path: circle()做圆角——它虽然能绕过宽高限制，但会导致点击热区仍为矩形，用户点在“视觉圆角外但实际盒内”的区域仍会触发，造成误操作
真正难的不是写出圆角，而是让圆角在各种设备、框架、状态（禁用/悬停/焦点）下都稳定呈现；每次加 border-radius 前，先看一眼 computed styles 里的实际宽高、border 和 overflow 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
