手风琴边框重叠非 bug，是 .accordion-item 与 .accordion-button 的 border-bottom 叠加所致；应统一由 .accordion-item 控制边框，清除按钮冗余底边框，并通过 last-child 和 border-radius 协同修复。
手风琴组件展开后边框重叠，不是 bug，是 Bootstrap 默认用 .accordion-item 的 border-bottom 和 .accordion-button 的 border-bottom 叠加造成的视觉重复；真正要调的是边框归属和继承链，不是强行删边框。
为什么 .accordion-item 和 .accordion-button 的边框会“叠一起”
Bootstrap 5 的手风琴结构中，.accordion-item 默认带 border-bottom: 1px solid var(--bs-accordion-border-color)，而 .accordion-button 本身也带 border-bottom（用于分隔按钮与内容区）。展开时两者紧邻，浏览器渲染下就出现“双线感”。这不是 margin 或 padding 错了，是边框职责没理清。
-
.accordion-item的边框控制整个条目的外轮廓（含顶部和底部），应只保留border-bottom，顶部由上一项承担 -
.accordion-button的边框本意是“按钮区域内部装饰”，展开后它和.accordion-collapse之间不该再有额外分割线 - 如果改了
border-radius或清除了某处边框但没同步清理对应位置的边框声明，就会暴露重叠
正确修复：统一收口边框归属
别在多个层级都设 border-bottom。推荐把所有边框逻辑集中到 .accordion-item，并清除按钮的冗余边框：
- 给
.accordion-item设border-bottom: 1px solid #dee2e6，同时确保border-top: none（避免首项顶边多出一条） - 显式清除按钮底部边框：
.accordion-button { border-bottom: 0; } - 若需保留按钮 hover/active 状态的底部分隔，改用
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075)替代，不参与边框合并逻辑 - 最后一项要去掉
border-bottom：.accordion-item:last-child { border-bottom: 0; }
遇到圆角或自定义主题时的兼容处理
一旦你给 .accordion-button 加了 border-radius: 0.375rem 0.375rem 0 0，而 .accordion-collapse 没同步加对应圆角，视觉上就会像“断开”或“错位”，其实只是边框弧度没对齐：
-
.accordion-button:not(.collapsed)展开态需配border-radius: 0.375rem 0.375rem 0 0 -
.accordion-collapse.collapse.show需配border-radius: 0 0 0.375rem 0.375rem - 若用了 Sass 主题变量，优先改
$accordion-border-radius和$accordion-button-active-border-radius，比硬写 CSS 更稳 - 注意：这些圆角值必须和
.accordion-item的overflow: hidden协同——否则圆角会被裁掉
动态插入或 Vue/React 封装时容易漏掉的点
JS 动态添加 .accordion-item 后，如果没触发 Bootstrap 的 reflow 或未等 DOM 完全挂载就查 offsetHeight，会导致 .accordion-collapse 的 height 内联样式计算错误，进而让边框位置飘移。此时 computed styles 里看到的 border-bottom 位置可能和预期不符。
- 确保新插入的
.accordion-item是.accordion的**直接子元素**，中间不能套<div> <li>Vue 中用 <code>v-for渲染时，在<template></template>外包一层<div> 会破坏结构，应直接 <code><div v-for> <li>React 中若用 <code>Fragment包裹，需确认最终 DOM 结构仍为.accordion > .accordion-item - 调试时优先看 Elements 面板里
.accordion-item是否真实存在，而不是只信 JS 日志
