Bootstrap 5+ 的 shadow 类通过 shadow-{size}（如 shadow-sm、shadow、shadow-lg）直接添加 class 实现阴影，需元素有尺寸且未被 overflow: hidden 裁剪；shadow-none 以 !important 覆盖其他阴影。
shadow 类怎么用Bootstrap 5+ 内置了一组轻量、开箱即用的阴影类，不需要写 CSS 就能快速加阴影。它们基于 box-shadow 属性预设了常用层级，命名规则是 shadow-{size}，比如 shadow-sm、shadow、shadow-lg。
直接加在元素 class 上即可生效，例如：
轻微阴影 默认中等阴影 较强阴影
注意：这些类默认只对块级元素或设置了 display: block 的元素有效；如果用在 或内联元素上，得先加 d-inline-block 或 d-block 才能看到效果。
shadow 类却没显示常见原因不是类名写错，而是元素本身不满足渲染 box-shadow 的条件：
box-shadow 不作用于「无尺寸」的元素——如果元素内容为空、且没设 width/height/padding，阴影就
overflow: hidden，可能把阴影裁掉（尤其 shadow-lg 偏移较大）transform: scale() 或 position: absolute 但未触发层叠上下文，导致阴影被其他元素遮盖shadow 相关样式shadow-none 和自定义阴影冲突吗不冲突，但要注意覆盖顺序。shadow-none 实际就是 box-shadow: none !important，带 !important，所以它会强制清除所有之前声明的 box-shadow 值。
如果你在同一个元素上同时写：class="shadow-lg shadow-none"，后者生效；但若用内联样式：style="box-shadow: 0 4px 8px rgba(0,0,0,.2)"，它会被 shadow-none 覆盖掉。
想临时禁用又保留自定义，推荐改用更可控的方式：
shadow-* 类，只留自定义 style
--bs-box-shadow: 0 0 0 transparent，再局部重设box-shadow 而不用 Bootstrap 类要看场景。Bootstrap 的 shadow 类适合原型、后台、管理页这类对视觉一致性要求高、迭代快的项目；但遇到以下情况，手写更稳妥：
@media (prefers-color-scheme: dark) 动态换色值transform 不影响 box-shadow 渲染位置，有时需用伪元素模拟）shadow-lg 元素密集滚动时，浏览器重绘压力比手写精简值略高真正容易被忽略的是：Bootstrap 默认阴影颜色是 rgba(0,0,0,.15)，在浅灰背景或白色主题下对比度不足，看着像没加——这时候别急着换框架，先 inspect 元素，把 color 值调深一点更实际。