Popover箭头颜色由CSS变量--bs-popover-arrow-color控制，需作用于.popover元素或其父容器；Bootstrap 5+用.popover-arrow伪元素实现，不同于BS4的.arrow子元素；须同步调整背景、边框色以保持视觉一致。
Popover箭头颜色由CSS变量控制，不是直接改border-color
bootstrap 5+ 的 popover 箭头（arrow）是通过伪元素 ::before 和 ::after 叠加实现的，底层依赖 --bs-popover-arrow-color 这个css变量。直接覆盖 border-color 或 background 很可能无效，因为箭头实际是用 transform + border trick 画出来的三角形，颜色由该变量统一驱动。
实操建议：
- 在你的自定义 CSS 中，针对
.popover或更精确的作用域（如[data-bs-toggle="popover"]），设置--bs-popover-arrow-color - 如果只改单个 popover，可在触发元素上加
data-bs-custom-class="my-popover"，再写.my-popover .popover .popover-arrow::before并重设变量 - 注意：变量必须作用于
.popover元素本身或其父容器，否则不生效（因为 arrow 伪元素继承自 popover 节点）
Bootstrap 4 和 5 的写法差异要分清
Bootstrap 4 没有 CSS 变量机制，箭头靠 .arrow 子元素的 border 实现，需覆盖 .popover .arrow::before 和 .popover .arrow::after 的 border-color；而 Bootstrap 5+ 统一用 --bs-popover-arrow-color，且伪元素类名改为 .popover-arrow（注意中间横线）。
常见错误：
- 在 Bootstrap 5 项目里照抄 BS4 的
.arrow选择器，结果完全不生效 - 写了
--bs-popover-arrow-color但没加到.popover元素上，比如只加在触发按钮上 - 用
!important强行覆盖border-color，虽能临时生效，但破坏变量体系，升级后易出问题
修改箭头颜色的同时，务必同步调整 popover 背景和边框
箭头颜色不是孤立存在的——它必须与 .popover 的背景色、边框色协调。比如把箭头设成深蓝，但 popover 背景还是默认白底，箭头就会“悬空”不融合。
推荐做法：
- 一起设置
--bs-popover-bg、--bs-popover-border-color和--bs-popover-arrow-color，保持视觉一致性 - 若使用 Sass，直接在
$popover-bg、$popover-border-color、$popover-arrow-color变量中统一修改，编译后更可靠 - 检查暗色模式下是否需要额外覆盖（Bootstrap 5.3+ 支持
@media (prefers-color-scheme: dark)媒体查询）
调试时用浏览器开发者工具盯住 .popover-arrow::before
最快速验证方式：打开 DevTools，找到弹出后的 .popover 元素，展开其子节点 .popover-arrow，右键检查 ::before 伪元素，看 computed 样式里 border-bottom-color（或其他方向 border）是否已应用你设的变量值。
容易忽略的点：
- Popover 是动态插入 DOM 的，样式规则必须在 popover 渲染后才生效，所以不能只写在
:root下却不加作用域 - 如果用了 Popover 的
container: 'body'选项，样式需全局有效（不能局限在某个组件 scoped style 里） - 某些 UI 库（如 Vue Bootstrap）会包裹一层额外 class，需相应调整选择器层级
