如何通过CSS消除Bootstrap 5按钮组ButtonGroup的重叠边框
通过为 .btn-group 内的 元素设置负外边距（negative margin）并配合层叠上下文（z-index）来消除重叠边框。具体做法是将相邻按钮的左侧或右侧边框宽度设为零，利用 margin-left: -1px 让后一个按钮覆盖前一个按钮的边框，同时确保按钮处于正确的层叠顺序以显示最外层边框。
为什么默认样式会导致视觉上的双线边框
Bootstrap 5 默认的按钮组样式中，每个按钮都拥有完整的边框，当它们紧密排列时，相邻的边框会叠加在一起，导致视觉上出现双倍宽度的线条。这是因为 border-collapse 属性在块级元素组合中不生效，且 display: flex 布局下边框是独立渲染的。
.btn-group { display: flex; } .btn-group > .btn { border: 1px solid #dee2e6; margin-left: -1px; z-index: 1; } .btn-group > .btn:first-child { margin-left: 0; }
上述代码展示了核心逻辑：所有按钮向左偏移1像素以覆盖前一个按钮的右边框，第一个按钮保持原位。但仅靠此步骤可能无法完美解决圆角和阴影问题，需结合伪元素或特定选择器优化。
如何正确处理首尾按钮的圆角与阴影
在应用负外边距后，首尾按钮需要保留圆角，而中间按钮应去除左右圆角以避免视觉断裂。同时，阴影效果通常只应用于整个按钮组的容器或首个/末个按钮，以防止内部产生杂乱的阴影堆叠。通过 :first-child 和 :last-child 选择器可以精准控制这些样式。
.btn-group > .btn:first-child { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; z-index: 2; } .btn-group > .btn:last-child { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; z-index: 2; } .btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
这段代码确保了只有首尾按钮具有圆角，中间按钮变为直角，从而形成连贯的视觉效果。此外，将 z-index 设置为2可确保首尾按钮在层叠中位于最上层，其边框完整显示。若使用 box-shadow，建议将其移至 .btn-group 容器上，或使用 inset 阴影模拟内部深度，避免每个按钮单独投射阴影造成的混乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
