Accordion箭头用button.accordion-button::after伪元素定义，通过:not(.collapsed)控制展开态显示并旋转，折叠态隐藏；颜色用color、大小用transform:scale()、方向用content值和rotate()调整，边框色由.accordion-item的border-color决定。
Accordion箭头在哪定义？用::after伪元素 + .collapsed状态联动
Bootstrap 默认不提供箭头图标，靠button.accordion-button::after伪元素生成，且只在未折叠时显示。关键不是“加箭头”，而是控制它何时出现、怎么转——.collapsed类名表示“当前面板已折叠”，所以展开态下这个类不存在，:not(.collapsed)才是你要写样式的钩子。
别用background-image：旧版 Safari 旋转时边缘糊，颜色难同步，维护成本高；也别依赖font-size调大小——伪元素content里的字符（如"▼"）缩放不均匀，移动端易错位。
-
button.accordion-button::after设基础内容和过渡：content: "▼"; transition: transform .2s; - 展开态加旋转：
button.accordion-button:not(.collapsed)::after { transform: rotate(-180deg); } - 确保左右
padding≥1.5rem，否则手指点到箭头区域可能不触发折叠（尤其 iOS）
改箭头颜色/大小/方向，为什么color和font-size不管用？
伪元素content: "▼"本质是文本节点，color能调色，但font-size会连带影响按钮文字高度，破坏行高对齐；而且 SVG 或 Font Awesome 图标根本不响应font-size。
真正可控的维度是：transform: scale()（缩放）、margin-left（间距）、line-height（垂直居中）——这些不影响按钮整体布局。
立即学习“前端免费学习笔记（深入）”；
- 放大箭头：
button.accordion-button::after { transform: scale(1.2); } - 调色优先用
color，但得确认父级没用color污染图标（比如.accordion-button设了color: white，箭头也会变白） - 想换方向（比如右向→）？直接改
content值：content: "▶";，再配合transform: rotate(90deg)微调
边框颜色改不动？先查.accordion-item的border-color
很多人以为箭头被边框盖住或颜色冲突，其实是视觉干扰——Accordion 的边框根本不由.accordion-button或.accordion-collapse控制，而是由.accordion-item的border-color决定。默认值是#dee2e6（浅灰），不是蓝色；所谓“蓝边”大概率是项目里覆盖了--bs-border-color变量，或误加了border-primary类。
- 调试时直接看 DevTools → Computed →
border-top-color，确认真实值 - 精准覆盖：
.my-accordion .accordion-item { border-color: #28a745; border-width: 1px; border-style: solid; }（三者缺一不可） - 外层 HTML 必须加
class="my-accordion"，否则样式权重不够，被 Bootstrap 原生规则压掉
焦点框蓝边怎么去掉？.accordion-button:focus必须清outline和box-shadow
那个烦人的蓝色焦点框，不是边框也不是图标，是.accordion-button:focus的box-shadow（硬编码rgba(13, 110, 253, 0.25)）叠加浏览器原生outline的结果。改--bs-primary完全无效，因为阴影值是编译时写死的。
- 最稳方案：
.accordion-button:focus { outline: none !important; box-shadow: none !important; } - 若要保留可访问性反馈，改用
border-color：.accordion-button:focus { border-color: #28a745; }（前提是.accordion-button默认有border: 1px solid transparent） - 深色模式下记得补
@media (prefers-color-scheme: dark)块，否则新设的焦点色在暗背景下可能看不见
真正容易被忽略的是：这个焦点样式只作用于.accordion-button，不是.accordion-item；如果用了data-bs-parent多层嵌套，外层容器的overflow: hidden可能把新设的border裁掉——调样式前先打开 DevTools 看 computed 样式里outline和box-shadow到底 applied 在谁身上。
