accordion默认边框颜色来自.accordion-item的border-color，继承自sass变量$border-color或$accordion-border-color，作用于border-top和border-bottom。
accordion 默认边框颜色从哪来
Bootstrap 的 accordion 边框颜色默认由 .accordion-item 的 border-color 决定，而这个值继承自 $border-color Sass 变量（v5.3+），最终落在 CSS 的 border-bottom 和 border-top 上。不是靠 .accordion-button 控制，也不是靠 box-shadow 伪装——改错地方就白调。
直接覆盖 CSS 最快生效
不改源码、不重编译，用自定义样式覆盖即可。关键点是提高选择器权重，且必须作用于 .accordion-item：
- 加
!important不推荐，但临时调试可用：.accordion-item { border-color: #0d6efd !important; } - 更稳妥写法是增强选择器：
.my-accordion .accordion-item { border-color: #dc3545; }，然后给外层容器加class="my-accordion" - 注意：只设
border-color不够，border-width和border-style也要一致，否则可能断线或变虚——Bootstrap 默认是1px solid
用 Sass 变量全局修改（适合项目级定制）
如果你用的是 Bootstrap 源码（如通过 npm + Sass 引入），改变量最干净：
- 在自定义 Sass 文件里，先定义
$border-color: #28a745;，再@import "bootstrap/scss/bootstrap"; - 别漏掉
$accordion-border-color—— v5.3+ 新增了这个独立变量，优先级高于$border-color，直接设它更精准：$accordion-border-color: #6f42c1; - 改完必须重新编译 CSS，热更新（HMR）通常不自动触发变量变更，手动重启构建进程
为什么加了样式没反应？常见踩坑点
边框“消失”或“不变色”，大概率是这些原因：
-
.accordion-item的子元素（比如.accordion-button）设置了border-bottom: none，视觉上遮住了父级边框——检查浏览器开发者工具的 computed 样式，看实际渲染的border-bottom是谁 applied 的 - 用了
data-bs-parent后，多个 Accordion 嵌套时，外层容器可能有overflow: hidden，把边框裁掉了 - 深色模式下，CSS 媒体查询可能重置了
border-color，记得加@media (prefers-color-scheme: dark) { ... }对应调整 - CDN 引入的 Bootstrap CSS 在你自定义样式之后加载，导致被覆盖——把你的
<style></style>放在<link rel="stylesheet">之后，或用<link rel="stylesheet" href="your.css" media="all">
边框这事看着小，但牵扯到继承链、选择器权重、Sass 编译时机和响应式上下文，调一次不生效，八成是其中一环没对上。
