Popover 的 box-shadow 由 .popover 类直接控制，其默认值为 0 .5rem 1rem rgba(0,0,0,.15)；修改时须针对 .popover 覆盖 box-shadow，而非子元素，且需 !important 确保优先级。
Popover 的 box-shadow 样式由哪个 CSS 类控制？
Bootstrap 5 的 popover 弹出框阴影由 .popover 元素自身的 box-shadow 决定，而不是通过伪元素或子类。默认值是 0 .5rem 1rem rgba(0, 0, 0, .15)（即 0 偏移、.5rem 模糊、1rem 扩散、半透明黑）。它直接写在 .popover 规则里，优先级高于多数自定义样式。
常见错误是只改 .popover-header 或 .popover-body，这两个区域本身没有阴影，改了也无效。
- 必须选中
.popover（注意不是.popover.show，后者只是控制显隐） - 如果用 Sass 编译，可覆盖
$popover-box-shadow变量，但纯 CSS 场景下直接覆写更稳妥 - 务必加
!important—— Bootstrap 的默认样式权重高，且可能被 JS 动态插入的 style 标签覆盖
如何用纯 CSS 覆盖默认阴影而不影响其他样式？
最安全的方式是提高选择器特异性，并仅重置 box-shadow 属性，避免意外覆盖圆角、边框或定位：
.popover {
box-shadow: 0 4px 12px rgba(0, 0, 0, .2) !important;
}
这个写法能生效的关键点：
立即学习“前端免费学习笔记（深入）”；
- 不改动
border-radius、background-color等其它属性，保留 Bootstrap 原有视觉结构 - 数值单位统一用
px避免和 Bootstrap 的rem单位产生计算偏差 - 如果项目用了 dark mode，记得额外加
.popover[data-bs-theme="dark"]对应规则，否则暗色主题下阴影可能过重
为什么修改后阴影有时不出现或位置偏移？
两种典型现象及其原因：
-
阴影完全没变：可能是 CSS 文件加载顺序问题 —— 你的自定义样式必须在 Bootstrap CSS 之后引入；或者使用了
data-bs-custom-class创建了带新 class 的 popover，此时需针对那个 class 写样式，例如.my-popover -
阴影出现在箭头下方或错位：Bootstrap 5 的 popover 箭头（
.popover-arrow）是绝对定位的伪元素，其z-index默认为 -1，会压在阴影下面。若你调大了box-shadow的扩散值（如设成2rem），而箭头未同步提升层级，就会被阴影“切掉”。解决方法是显式设置.popover-arrow { z-index: 1; }
要不要用 filter: drop-shadow() 替代 box-shadow？
不推荐。虽然 filter: drop-shadow(0 4px 12px rgba(0,0,0,.2)) 看似更灵活，但它有实际副作用：
- 会作用于整个 popover 元素（包括箭头），导致箭头边缘也带模糊阴影，破坏 Bootstrap 原有干净利落的三角形设计
- 在部分 Safari 版本中，
filter可能触发硬件加速异常，造成 popover 闪烁或渲染错位 - 无法单独控制 x/y 偏移与扩散，调整精度不如原生
box-shadow
真正需要精细控制时，宁可微调 box-shadow 的四个参数，也不要换到 filter 路线。
记住：Popover 的阴影本质是装饰性视觉反馈，不是功能必需项。改得过度（比如太浓、太大、带颜色）反而干扰信息层级，尤其在小屏幕或高密度列表中容易喧宾夺主。
