border-radius: 50% 没变圆是因为宽高不相等；它按width×50%和height×50%分别计算横向与纵向半径，宽高不等时呈现椭圆，必须显式设置相等的width和height（如48px）才能实现正圆。
border-radius: 50% 为什么没变圆？
因为宽高不相等。border-radius: 50% 不是“强制变圆”，而是按横向半径 = width×50%、纵向半径 = height×50% 分别计算——宽高一不一样，结果就是椭圆或胶囊形。
必须显式设置 width 和 height 相同值（如 48px），不能靠 padding 或内容撑开；也不能只设 min-width 或 max-width，它们会破坏等比关系。
- 推荐写法：
width: 48px; height: 48px; border-radius: 50%; - 响应式场景可换用
aspect-ratio: 1 / 1（Chrome 88+、Firefox 89+、Safari 15.4+ 支持），老浏览器 fallback 固定像素 - 别用
line-height撑高来凑正方——字体渲染差异会导致高度不准，尤其 macOS/Windows
加号按钮的 + 符号怎么居中才稳？
flex 是目前最可靠的居中方式。很多教程还教用 line-height 等于高度，但实际在不同系统上文字 baseline 渲染有偏差，容易上下偏移几像素。
正确做法是把按钮设为 display: flex，再用 justify-content: center 和 align-items: center 居中内容；font-size 控制加号大小，别用 transform: scale()——它会让文字边缘模糊。
立即学习“前端免费学习笔记（深入）”；
- 实体符号用
+最稳妥，语义清晰、无需字体支持 - 避免直接写
+字符：某些字体里它太细或位置偏低，视觉上像“飘着” - 深色模式适配建议设加号颜色为
currentcolor，随父文本色自动切换
点击热区比看起来小？这是真问题
border-radius 只裁剪视觉，不改变点击区域——鼠标进入原始矩形框（含四个尖角）依然能触发 click。但移动端手指点不准，44px × 44px 是最低可触控热区标准。
单纯加 padding 扩展热区，可能让按钮视觉变形；更干净的做法是用伪元素扩展热区：::before 设 position: absolute、inset: -8px、content: ""，不干扰布局又扩大响应范围。
- 必须加
role="button"和tabindex="0"，否则键盘用户无法聚焦 - 焦点环默认是直角 outline，会盖住圆角——改用
box-shadow模拟，或设outline-offset: -2px往内缩 - 验证热区是否达标：临时加
outline: 2px solid red，看焦点框是否贴合圆角边缘
focus-visible 和 outline 的取舍
别全局写 outline: none。这等于放弃键盘可访问性，而且 WCAG 也不允许。
真正该做的是区分聚焦来源：用 :focus-visible 只对键盘聚焦生效样式，鼠标点击时隐藏 outline；同时保留 :focus 基础状态，确保所有聚焦方式都有反馈。
- 推荐组合：
&:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); } - 如果用了
clip-path或mask，热区会被真裁剪——这时要额外测试是否仍满足 44px × 44px 最小尺寸 - IE11 下
background-clip: padding-box可能导致圆角内露白边，得加background-clip: border-box覆盖
border-radius: 50% 就完事的——宽高一致、符号渲染、热区范围、键盘交互，四个点里漏一个，用户在真实设备上就可能点不中、看不见、或根本没法用。 
