正确做法是父容器设 display: flex 和 overflow: hidden，所有按钮默认 border-radius: 0，首按钮加左右内侧圆角，尾按钮加左右外侧圆角，并用索引动态标记首尾 class 确保逻辑稳定。
button 元素用 flex 布局时圆角怎么只加在两端
直接给父容器设 display: flex，再用 border-radius 分别控制每个 button 的左右圆角——但这样不行，因为中间按钮的左右边都会被加圆角，视觉上就断开了。正确做法是让所有按钮共用一个“外层容器”，然后只给首尾两个按钮单独设圆角，中间按钮左右圆角全清零。
- 父容器加
display: flex和overflow: hidden（防止圆角被裁切或溢出） - 每个
button默认设border-radius: 0 - 第一个按钮加
border-top-left-radius和border-bottom-left-radius - 最后一个按钮加
border-top-right-radius和border-bottom-right-radius - 避免用
:first-child/:last-child，改用:first-of-type或更稳妥的 class（比如btn-first、btn-last），防止插入其他元素后失效
用 border-collapse 或 margin 贴紧按钮会出什么问题
有人试过给按钮设负 margin-right 来“挤”在一起，或者模仿表格用 border-collapse——但 border-collapse 只对 table 生效，对 button 完全无效；负 margin 则容易导致点击热区重叠、焦点框错位，且响应式缩放时难控制。
- 负 margin 在高 DPI 屏幕或 zoom 缩放下可能产生 1px 缝隙或重叠
- 键盘导航时，
focus样式若没同步调整圆角和 outline 偏移，会显得错位 - 如果按钮有
box-shadow或border，负 margin 不会合并边框，反而让阴影/边框堆叠变厚 - 真正贴紧靠的是 flex 的默认
gap: 0和无空格 HTML 结构，不是靠“抵消”间距
React/Vue 里动态按钮组怎么保持首尾圆角逻辑稳定
组件化渲染时，按钮数量可能变化，硬写 btn-first / btn-last class 容易漏掉或错位。得靠渲染逻辑自动标记首尾。
- React 中遍历数组时，用索引
index === 0和index === buttons.length - 1控制 class - Vue 中用
v-for="(btn, i) in buttons)"，配合:class="{ 'btn-first': i === 0, 'btn-last': i === buttons.length - 1 }" - 千万别依赖 DOM 查询（如
document.querySelector('.btn:last-child')）来加 class，服务端渲染或 SSR 下会失败 - 如果按钮组可能为空，要提前 guard：空数组时整个容器不渲染，避免样式残留
移动端点击区域小、圆角被截断怎么办
iOS Safari 和部分安卓浏览器对小于 44×44px 的可点击区域会自动放大，但同时可能把圆角“压扁”或截掉——尤其当父容器有 overflow: hidden 但高度不够时。
立即学习“前端免费学习笔记（深入）”；
- 确保每个
button的min-height≥ 44px，推荐用padding控制尺寸，而非固定height - 圆角值别超过按钮高度的一半，比如高 44px 就别设
border-radius: 30px，22px 是安全上限 - 测试真机时重点看 Safari：它对
border-radius+overflow: hidden组合渲染最保守，有时需加-webkit-mask补救（但仅限极端情况） - 如果按钮带图标，图标本身也要参与圆角计算——比如用
svg内联时，确保其viewBox和容器对齐，否则右圆角处图标会被切
实际最难的是按钮状态切换时圆角与背景色、边框的协同——比如 hover 时边框变粗，但圆角半径没跟着调，就会露白边。这种细节没法靠一套 CSS 解决，得把 border、background、border-radius 当成原子组合一起动。
