最直接方法是设宽高相等且border-radius为50%，如width:48px;height:48px;border-radius:50%；需配合flex居中、足够触控热区及aria-label等可访问性支持。
用 border-radius 把按钮变成圆形最直接
HTML 按钮本身是矩形，想变圆，核心就一条：让宽高相等，再把四个角全切掉。关键在 CSS 的 border-radius 属性——设为 50% 就能强制画出正圆，前提是元素得是正方形。
常见错误是只写 border-radius: 50% 却没控制宽高，结果出来是椭圆甚至看不出变化。必须同时设置 width 和 height 相同，比如都设成 48px。
- 推荐写法：
width: 48px; height: 48px; border-radius: 50%; - 如果用
em或rem，确保两者值一致，否则会变形 - 内边距（
padding）会影响内容居中，建议用line-height或display: flex对齐文字或图标
按钮内容居中对齐容易出问题
圆形按钮里放文字或图标时，视觉上常偏上或偏左，尤其在不同浏览器里表现不一。这是因为默认的 vertical-align 和行高计算方式不统一。
最稳妥的方式是用 Flex 布局，不用猜行高、不用调 line-height：
.circle-btn {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
- 避免只靠
text-align: center+line-height，在移动端或缩放后容易错位 - 图标按钮（如
×或 Font Awesome）同样适用这套规则 - 如果按钮需要响应式（比如随字体大小缩放），可用
min-width/min-height配合em单位
点击热区和可访问性别被忽略
视觉上是个小圆点，但手指或鼠标点不准就等于没做出来。很多开发者只盯着外观，忘了交互基础。
- 实际可点击区域建议不小于
44px × 44px（符合 WCAG 触控标准），可通过padding扩展热区，再用overflow: hidden隐藏溢出部分 - 务必加
cursor: pointer，否则悬停时没反馈 - 如果是纯图标按钮，必须加
aria-label，比如<button aria-label="关闭">×</button>，否则屏幕阅读器读不出来 - 禁用状态（
:disabled）要同步改opacity和cursor，不然看起来可点实则无效
IE 兼容或旧版 Safari 下 border-radius: 50% 行为异常
IE9+ 和 Safari 6.1+ 都支持 border-radius: 50%，但老版本 Safari（比如 iOS 6）对百分比圆角解析不稳定，有时会变成“带棱角的圆”。
真要兼容极旧环境，可以降级用固定像素值，比如 border-radius: 24px（假设宽高是 48px），虽然不够灵活，但确定可靠。
- 现代项目基本不用考虑 IE，但如果目标用户含企业内网（仍跑 IE11），记得测试
button在display: flex下是否塌陷 - 某些安卓 WebView 对
flex居中支持弱，可加-webkit-box-pack和-webkit-box-align前缀保底 - 不要用
transform: rotate(0)这类 hack 强制重绘来“修复”圆角，治标不治本还伤性能
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
