tab选项卡的阴影和发光效果应使用box-shadow属性实现，核心是为.nav-link.active添加多层box-shadow（如0 2px 8px rgba(0,0,0,0.15)和0 0 16px rgba(0,123,255,0.3)），配合transition: box-shadow 0.25s ease-in-out平滑过渡，并确保父容器不设overflow: hidden以避免裁剪。
Tab 选项卡的阴影和发光效果该用什么 CSS 属性？
Bootstrap 默认的 nav-tabs 没有阴影或发光，得靠自定义 CSS。核心是 box-shadow 控制阴影（包括内阴影、多层阴影），filter: drop-shadow() 或 text-shadow 配合伪元素可模拟“发光”感。但注意：box-shadow 在 border-radius 和 overflow: hidden 下容易被裁剪，Tab 的激活态（.active）要单独加样式，否则阴影不生效。
常见错误：直接给 .nav-link 加 box-shadow，结果阴影被父容器 .nav 的 overflow: hidden 吃掉；或者用 text-shadow 给文字“发光”，但切换 Tab 时没同步到激活态背景上，视觉脱节。
- 激活态阴影必须作用在
.nav-link.active上，且父容器不能设overflow: hidden - 发光感建议用两层
box-shadow：一层常规阴影（0 2px 8px rgba(0,0,0,0.15)），一层高模糊半透阴影（0 0 16px rgba(0,123,255,0.3)）模拟蓝光效果 - 避免对整个
.nav容器加阴影——它会把所有 Tab 一起罩住，失去“选中项突出”的意图
如何让阴影在移动端缩放时仍自然？
响应式下 Tab 宽度变窄、字体缩小，但固定像素的 box-shadow（如 0 0 16px）在小屏上会显得过重甚至溢出屏幕。解决方案不是写媒体查询逐个调数值，而是改用相对单位 + 媒体查询分级控制。
推荐做法：用 rem 或 em 定义阴影偏移与模糊值，并配合 Bootstrap 的断点类做降级。例如在 sm 下用 0 0 0.5rem，到 md 升为 0 0 1rem，再大屏用 0 0 1.5rem。同时限制最大宽度防止阴影撑破视口。
- 别用
px写死阴影尺寸，尤其blur-radius—— 小屏下16px模糊可能盖住相邻 Tab - 在
@media (max-width: 576px)中给.nav-link加padding: 0.5rem 0.75rem，并同步缩小box-shadow的spread-radius（如有） - 发光色建议用主题色变量（如
$primary），而不是写死#007bff，方便后续换肤
Tab 切换时如何让阴影/发光平滑过渡？
默认切换是瞬间生效，阴影突显会显得生硬。加 transition 能缓解，但要注意只过渡需要变化的属性，否则拖慢渲染。实测最稳妥的是只过渡 box-shadow 和 background-color，时间控制在 0.2s～0.3s，缓动用 ease-in-out。
容易踩的坑：给整个 .nav 加 transition: all 0.3s，会导致 height、padding 等无关属性也参与动画，造成抖动；或者过渡时间设成 0.5s 以上，在快速切换 Tab 时动画堆积，UI 滞涩。
- 正确写法：
.nav-link { transition: box-shadow 0.25s ease-in-out, background-color 0.25s ease-in-out; } - 确保
.nav-link.active的box-shadow值与非激活态有明显差值（比如从none到0 0 0.75rem rgba(0,123,255,0.4)），否则过渡不可见 - 如果用了
filter: drop-shadow()，注意它无法被transition直接控制，得改用box-shadow替代
为什么用 Bootstrap 5 的 data-bs-toggle="tab" 时发光效果失效？
因为 Bootstrap 5 的 Tab JS 会动态切换 .active 类，但如果你的发光样式写在 .nav-link:hover 或 .nav-link:focus 上，JS 切换后焦点丢失，效果就没了。真正生效的必须是 .nav-link.active 这个 class，且不能被其他 CSS 权重覆盖。
另一个常见问题：自定义样式放在 Bootstrap CSS 之后，但被其 !important 规则压制（比如某些主题包会强制重置 box-shadow）。这时要么提高选择器权重（如加 .nav-tabs .nav-link.active），要么用 !important（仅限调试，上线前应清理）。
- 检查浏览器开发者工具里
.nav-link.active是否被划掉——被划掉说明样式被覆盖 - 不要依赖
:focus-visible模拟激活态，它只在键盘操作时触发，鼠标点击不生效 - 如果用 Sass，把自定义样式放在 Bootstrap
@import之后，并用!default覆盖变量（如$enable-shadows: true）
overflow 和 JS 切换后 class 的真实存在性——这两点不确认，发光再炫也没用。
