箭头颜色由--bs-popover-arrow-color变量控制，需作用于.popover元素或其父容器；必须同步设置--bs-popover-bg、--bs-popover-header-bg和--bs-popover-border-color以保证视觉协调；Bootstrap 4不支持该变量，需改用.border-color覆盖.arrow伪元素。
箭头颜色由--bs-popover-arrow-color变量控制，不是border-color
Bootstrap 5+ 的 popover 箭头是伪元素 .popover-arrow::before 和 ::after 叠加生成的三角形，颜色完全由 CSS 变量 --bs-popover-arrow-color 驱动。直接写 .popover-arrow { border-color: red } 或 background-color 无效——因为底层用的是 transform + border trick，颜色不来自样式声明，而来自该变量的计算值。
--bs-popover-arrow-color 必须作用于 .popover 元素本身
变量必须被 .popover 节点（或其父容器）继承，否则伪元素拿不到值。常见错误是把变量写在触发按钮上，比如：<button style="--bs-popover-arrow-color: #dc2626;">——这完全不生效。
- 全局生效：在
<style>块末尾或自定义 CSS 文件中写：:root { --bs-popover-arrow-color: #dc2626; } - 局部生效：初始化时传
customClass，例如new bootstrap.Popover(el, { customClass: 'my-red-popover' })，再写：.my-red-popover .popover { --bs-popover-arrow-color: #dc2626; } - 单个 popover：给弹出框 DOM 加内联变量（需 JS 动态操作或 template 自定义），如：
<div class="popover" style="--bs-popover-arrow-color: #dc2626;">
别只改箭头，背景和边框必须同步协调
箭头颜色孤立存在会“悬空”：深红箭头配默认白底 popover，视觉割裂明显。你得一并设置：
-
--bs-popover-bg：popover 主体背景色 -
--bs-popover-header-bg：标题栏背景色 -
--bs-popover-border-color：边框颜色（注意不是--bs-popover-border，后者是 v5.2+ 新增变量，但部分版本仍用前者）
例如：:root { --bs-popover-arrow-color: #dc2626; --bs-popover-bg: #fee2e2; --bs-popover-header-bg: #fca5a5; --bs-popover-border-color: #ef4444; }
立即学习“前端免费学习笔记（深入）”；
Bootstrap 4 和 5 写法不能混用
如果你项目还在用 Bootstrap 4，--bs-popover-arrow-color 不存在，它用的是 .popover .arrow 子元素 + border-color 实现。此时要覆盖：.popover .arrow::before, .popover .arrow::after { border-color: #dc2626; }。照搬 BS5 的写法，在 BS4 里完全不生效。
最易被忽略的是变量作用域和配套色系——箭头不是独立组件，它是 popover 视觉系统的一部分，漏掉任意一个变量，都会让定制效果看起来“没做完”。
