list-group-item边框重叠是因相邻项的border-bottom与border-top紧贴叠加所致；解决方法包括：用rounded+overflow-hidden裁剪、first-child/last-child清除首尾边框，或用list-group-flush彻底移除边框。
list-group-item 边框为什么会重叠
Bootstrap 的 list-group 默认给每个 list-group-item 设置了上下边框（border-top 和 border-bottom），当多个 item 连续排列时，相邻 item 的边框会紧贴——比如上一个的 border-bottom 和下一个的 border-top 就会视觉上“加粗”或显得过重，尤其在浅色背景或高对比主题下特别明显。
用 border-radius + overflow-hidden 破解重叠视觉
最稳妥、不改 Bootstrap 源码也不依赖额外 CSS 的方式，是利用容器裁剪：把 list-group 自身设为圆角并隐藏溢出，再让首尾 item 分别去掉顶部/底部边框。这样既保留语义结构，又避免手动计算边框偏移。
实操建议：
- 给
list-group添加overflow: hidden和border-radius: 0.25rem（对应 Bootstrap 的默认圆角） - 用
.list-group-item:first-child去掉border-top - 用
.list-group-item:last-child去掉border-bottom - 确保没有其他样式（如自定义
margin或padding）干扰 item 的垂直流式排列
示例片段：
- Item 1
- Item 2
- Item 3
用 list-group-flush 彻底移除边框（但要小心场景）
list-group-flush 是 Bootstrap 内置类，它会移除所有 border 并重置 border-radius，适合需要极简分隔（比如纯文字菜单、侧边栏导航）的场景。
但要注意：
- 它同时清除了
border-top和border-bottom，所以 item 之间只剩margin-bottom分隔，视觉间距变小 - 如果项目里用了
list-group-item-action或 hover 效果，flush不影响交互，但缺少边框后可能降低可感知性 - 和
rounded类共用时，flush会覆盖圆角，需手动补回rounded
自定义 CSS 覆盖时为什么不能只写 border: none
直接对 .list-group-item 写 border: none 通常无效，因为 Bootstrap 的原始规则带 !important（v5.3+ 已移除，但老项目或定制版仍可能存在），更关键的是：它设置了 border-top 和 border-bottom 分开，而 border: none 只清 border-width，不覆盖 border-color 或 border-style 的独立声明。
安全写法是明确覆盖：
.list-group-item {
border-top: 0;
border-bottom: 0;
}
或者用 Bootstrap 工具类组合，比手写 CSS 更稳定。
真正容易被忽略的是：边框重叠问题在暗色模式（data-bs-theme="dark"）下会更隐蔽，但一旦切换主题，原本靠颜色弱化的边框可能突然凸显——建议在两种主题下都验证 border-color 是否同步适配。
