正圆加号按钮需四要素：宽高相等（如48px）+ border-radius: 50% + +实体居中（flex更稳）+ 伪元素扩展热区+可访问性属性（role="button"、tabindex="0"）。
用 border-radius 把按钮变成正圆
加号按钮本质是带背景色的块级元素，要成圆，核心是让宽高等同 + border-radius: 50%。很多初学者只写 border-radius: 50% 却忘了约束宽高一致，结果得到的是椭圆或胶囊形。
- 必须显式设置
width和height相等（比如48px），不能依赖内容撑开 -
border-radius: 50%在宽高不等时按横向/纵向分别计算半径，不是“变圆”，而是“按比例取半” - 推荐用
aspect-ratio: 1辅助响应式场景，但需注意 Safari 15.4+ 才支持，老版本仍需固定宽高
加号符号用 + 还是 Unicode？
HTML 中最稳妥的是直接写 + 实体，它语义清晰、兼容性好、无需字体支持。用 + 字符本身也行，但要注意在某些字体中加号太细或位置偏下，视觉上像悬浮着。
- 避免用
+或\u002B—— 没必要增加转义复杂度 - 不要用图标字体（如 Font Awesome 的
fa-plus）来替代加号，除非你整个项目已统一用图标字体，否则多加载一套字体得不偿失 - 若需适配深色模式，建议把加号颜色设为
currentcolor，让它随父容器文本色自动变化
居中加号：flex 比 line-height 更可靠
老方法靠 line-height 等于盒子高度来垂直居中，但遇到字体渲染差异（尤其 macOS 和 Windows 对 font-size 的 subpixel 处理不同）容易偏移。Flex 是目前最稳的解法。
- 给按钮加
display: flex、justify-content: center、align-items: center - 加号本身用
font-size控制大小，别用transform: scale()—— 它会模糊文字边缘 - 如果按钮含图标或需要动画，记得加
user-select: none，防止误触发文字选中
点击热区与可访问性容易被忽略
纯视觉上的圆按钮，实际点击区域常比看起来小。尤其当只靠 padding 扩展热区时，在移动端可能不够——手指点不准。
- 用
::before伪元素扩展点击层：设置position: absolute、inset: -8px、content: ""，不破坏布局又扩大热区 - 必须加
role="button"和tabindex="0"，否则键盘用户无法聚焦；再监听keydown触发Enter/Space - 别只靠颜色区分状态，加号按钮的
:focus-visible轮廓线建议保留，或改用box-shadow替代默认 outline
border-radius 就完事的，宽高一致、符号渲染、热区范围、键盘交互——四个点里漏一个，用户在真实设备上就可能点不中、看不见、或根本没法用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
