实现圆形按钮需确保宽高相等、设border-radius:50%、兼顾触控热区（≥48×48px）与无障碍（aria-label），并注意与现有样式系统兼容。
用 CSS 的 border-radius 实现圆形按钮
按钮变圆的关键不是改 HTML 结构，而是用 CSS 把方形按钮“压”成正圆。前提是按钮本身宽高相等，否则 border-radius: 50% 只会产出椭圆。
常见错误是只写 border-radius: 50% 却没控制宽高——比如按钮文字多、默认 display: inline，宽度撑开，高度却很矮，结果变成横向拉伸的卵形。
- 给按钮设固定
width和height（如40px），且两者必须相等 - 加
border-radius: 50% - 确保内边距
padding不破坏比例（建议设为0或对称值） - 文字居中用
display: flex; align-items: center; justify-content: center，比纯line-height更可靠
<button class="cart-btn">🛒</button>
.cart-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ff6b6b;
border: none;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
图标按钮要不要保留文字？
纯圆形 + 图标（如 ?）在小尺寸下可读性差，尤其色弱用户或高缩放场景。WCAG 推荐所有交互元素都应有可感知的文字标识。
不建议完全删掉文字，但可以视觉隐藏、保留语义：
- 用
aria-label补充说明： - 若需显示文字，改用带圆角的 pill 形状（
border-radius: 20px）更稳妥 - 响应式场景下，可配合媒体查询：小屏用圆形+图标+
aria-label，中大屏展开为“加入购物车”文字按钮
点击热区太小导致误操作
40px × 40px 的圆形按钮在触摸设备上远低于推荐的最小触控尺寸（48×48px）。用户点不中、反复点击，实际是 CSS 尺寸没达标，不是交互逻辑问题。
- 把容器（如父
<div>）设为 <code>48px × 48px，按钮自身仍保持 40px 圆形，靠margin: auto居中 - 或直接扩大按钮尺寸：设
width: 48px; height: 48px;，同时调整字体大小避免图标溢出 - 别依赖
padding扩展热区——它会撑开圆形边界，让边缘变虚、失真 - Tailwind：用
size-10 rounded-full flex items-center justify-center（size-10= 2.5rem = 40px） - Bootstrap 5：加
btn btn-sm rounded-circle p-2，再覆盖width/height确保相等 - 若用 CSS 自定义属性，把尺寸和颜色抽成变量：
--btn-cart-size: 48px; --btn-cart-bg: #ff6b6b;，方便主题切换
和现有按钮样式系统怎么兼容？
如果项目已用 Tailwind、Bootstrap 或自定义 CSS 组件库，硬写独立 .cart-btn 容易冲突或重复。优先复用已有工具类或变量。
圆形按钮看着简单，真正落地时宽高一致性、触控可达性、无障碍支持这三点最容易被跳过。尤其是团队协作中，别人改了全局按钮 padding 或 font-size，你的圆形就突然变椭了——建议加一条自动化视觉回归测试，捕获这类变形。
