许多开发者在调整 Popover 边框颜色时，习惯直接修改 border 属性，但往往发现改动后毫无变化。实际上，从 Bootstrap 5.2 版本开始，Popover 边框颜色由 CSS 变量 --bs-popover-border 统一控制。若要全局修改，可在 :root 中定义；若需局部定制，则通过 customClass 配合 CSS 实现；如果项目仍使用 Bootstrap 4，直接修改 .popover 的 border-color 即可。理解这一机制，才能精准完成样式定制。
Bootstrap Popover边框颜色由CSS变量主导，直接修改border属性无法生效
在 Bootstrap 5+ 中，Popover 默认通过 --bs-popover-border CSS 变量来控制边框颜色，若直接在元素上添加 style="border: 1px solid red" 会被变量值覆盖。正确的做法是覆盖该变量或其对应的选择器，才能让自定义样式生效。
- 变量名称：
--bs-popover-border（控制整个 Popover 容器边框颜色） - 适用范围：仅针对 Bootstrap 5.2 及以上版本的默认 Popover；旧版（如 v4）则使用
.popover类的border-color属性 - 优先级说明：自定义样式权重需高于 Bootstrap 原生样式，建议使用
:root或组件级style内联变量，也可添加!important（但不推荐）
Popover边框颜色修改方案：全局通过:root统一定制，局部借助data-bs-custom-class灵活配置
全局统一修改操作最简便，但会影响页面中所有 Popover 组件；局部定制则更加灵活，适用于不同场景下的样式差异化需求。
- 全局修改方式（适合主题色统一）：
:root { --bs-popover-border: #e63946;} - 局部修改方式：初始化时传入
customClass参数，并编写对应 CSS 样式：const popover = new bootstrap.Popover(element, { customClass: 'my-popover-red-border'});然后定义：.my-popover-red-border .popover { --bs-popover-border: #e63946;} - 注意事项：
customClass是添加在 Popover 容器（.popover元素）上，而非触发元素
常见错误排查：修改.popover后未生效？需检查.popover-header与.popover-body的继承关系
Popover 组件由三部分构成：.popover（外层容器）、.popover-header（标题区域）、.popover-body（内容区域）。边框样式仅作用于 .popover，若手动为 header 或 body 添加 border，会破坏视觉统一性。
- 错误示例：
.popover-header { border-bottom: 1px solid #007bff }→ 造成上下边框颜色不协调 - 正确做法：仅修改
.popover的--bs-popover-border变量，让 header 和 body 自动沿用边框样式（它们本身不包含边框） - 验证方式：打开浏览器开发者工具，选中 Popover 元素，在 computed 样式面板中检查
border-color是否与设定的变量值一致
版本兼容提醒：Bootstrap 4 与 5 的类名及变量命名体系差异显著
如果项目仍基于 Bootstrap 4，则 --bs-popover-border 变量不可用，需直接覆盖 .popover 的 border-color 属性。
- Bootstrap 4 写法：
.popover { border-color: #ff6b6b !important; } - Bootstrap 5 写法（推荐使用变量）：
.popover { --bs-popover-border: #ff6b6b; } - 混用风险：在 Bootstrap 4 项目中使用了 v5 的变量名，CSS 不会生效且无报错提示，容易导致调试受阻
- 版本查询方法：查看
bootstrap.min.css文件头部注释，或执行bootstrap.version（v5+ 支持此方法，v4 不暴露版本信息）
调整 Popover 边框颜色的核心，不在于“如何添加样式”，而在于“样式应加在哪一层、由谁来控制颜色”。变量名拼写错误、版本不匹配、或者 class 位置放错，都可能导致修改无效，白白耗费时间。
