直接写 .popover { box-shadow: ... } 不生效，因 bootstrap 5 的 popover 动态插入 body 末尾，且 .popover.show 的 box-shadow 带 !important；应使用 body .popover.show { box-shadow: ... !important; } 并保留 transition。
Bootstrap 5 的 popover 默认使用 box-shadow，但它的样式由 .popover 类及其变体（如 .popover.show）控制，直接覆盖需注意选择器权重和显示时机。
为什么直接写 .popover { box-shadow: ... } 常常不生效？
因为 Bootstrap 5 的 popover 实际 DOM 是动态插入到 末尾的，且默认样式中 .popover.show 的 box-shadow 声明带 !important（见源码 node_modules/bootstrap/scss/_popover.scss），普通 CSS 规则会被覆盖。
- 必须提高选择器特异性，例如用
body .popover.show或.popover.show[style] - 避免只改
.popover，它在未显示时无box-shadow；真正要改的是.popover.show - 如果用了
container: 'body'（默认），确保自定义样式在全局 CSS 中，而非组件 scoped style 内
推荐写法：用 !important 覆盖并保留过渡效果
Bootstrap 的 box-shadow 动画依赖 transition: box-shadow .2s ease-in-out，硬删它会让阴影突显。建议复用原过渡逻辑，只换值：
body .popover.show {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}
- 用
body .popover.show确保权重高于 Bootstrap 默认的.popover.show - 保留
!important是最稳妥做法——Bootstrap 官方构建的 CSS 就用了它 - 若想更柔和，可把
25px改小，或调低rgba()第四个参数（透明度）
进阶控制：按触发方式或内容类型区分阴影
Popover 本身不自带语义类，但你可以手动添加自定义 class 到触发元素或通过 JS 初始化时注入：
const popover = new bootstrap.Popover(triggerEl, {
customClass: 'popover-shadow-lg'
});
然后写对应样式：
.popover.popover-shadow-lg.show {
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25) !important;
}
-
customClass会加到 popover 元素上，是 Bootstrap 5.2+ 支持的官方配置项 - 避免用
data-bs-*属性做条件判断——CSS 无法读取 data 属性值 - 若需响应式阴影（比如移动端减小模糊半径），可用
@media (max-width: 768px)套一层
真正容易被忽略的是：Popover 的 offset、boundary 和 fallbackPlacements 会影响其最终位置，而阴影是相对于 popover 元素自身渲染的。如果阴影看起来“偏了”，大概率不是阴影代码问题，而是 popover 框被重新定位过——先检查 placement 是否稳定，再调阴影。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
