bootstrap 5+ 的 shadow 类通过 shadow-{size}（如 shadow-sm、shadow、shadow-lg）直接添加 class 实现阴影，需元素有尺寸且未被 overflow: hidden 裁剪；shadow-none 以 !important 覆盖其他阴影。
Bootstrap 的 shadow 类怎么用
Bootstrap 5+ 内置了一组轻量、开箱即用的阴影类，不需要写 CSS 就能快速加阴影。它们基于 box-shadow 属性预设了常用层级，命名规则是 shadow-{size}，比如 shadow-sm、shadow、shadow-lg。
直接加在元素 class 上即可生效，例如：
<div class="shadow-sm">轻微阴影</div> <div class="shadow">默认中等阴影</div> <div class="shadow-lg">较强阴影</div>
注意：这些类默认只对块级元素或设置了 display: block 的元素有效；如果用在 <span></span> 或内联元素上，得先加 d-inline-block 或 d-block 才能看到效果。
为什么加了 shadow 类却没显示
常见原因不是类名写错，而是元素本身不满足渲染 box-shadow 的条件：
-
box-shadow不作用于「无尺寸」的元素——如果元素内容为空、且没设width/height/padding，阴影就不可见 - 父容器设置了
overflow: hidden，可能把阴影裁掉（尤其shadow-lg偏移较大） - 元素用了
transform: scale()或position: absolute但未触发层叠上下文，导致阴影被其他元素遮盖 - Bootstrap CSS 文件没正确加载，或你用的是精简版（如仅引入 grid + utilities），漏掉了
shadow相关样式
shadow-none 和自定义阴影冲突吗
不冲突，但要注意覆盖顺序。shadow-none 实际就是 box-shadow: none !important，带 !important，所以它会强制清除所有之前声明的 box-shadow 值。
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
如果你在同一个元素上同时写：class="shadow-lg shadow-none"，后者生效；但若用内联样式：style="box-shadow: 0 4px 8px rgba(0,0,0,.2)"，它会被 shadow-none 覆盖掉。
想临时禁用又保留自定义，推荐改用更可控的方式：
- 删掉
shadow-*类，只留自定义style - 用 CSS 变量覆盖，比如在根节点定义
--bs-box-shadow: 0 0 0 transparent，再局部重设
要不要自己写 box-shadow 而不用 Bootstrap 类
要看场景。Bootstrap 的 shadow 类适合原型、后台、管理页这类对视觉一致性要求高、迭代快的项目；但遇到以下情况，手写更稳妥：
- 需要水平/垂直偏移、模糊半径、扩散距离都精确控制（比如卡片悬停时 y 偏移 +2px，点击时变深）
- 要适配深色模式，需配合
@media (prefers-color-scheme: dark)动态换色值 - 阴影要跟随元素旋转、缩放变化（
transform不影响box-shadow渲染位置，有时需用伪元素模拟） - 性能敏感场景：多个
shadow-lg元素密集滚动时，浏览器重绘压力比手写精简值略高
真正容易被忽略的是：Bootstrap 默认阴影颜色是 rgba(0,0,0,.15)，在浅灰背景或白色主题下对比度不足，看着像没加——这时候别急着换框架，先 inspect 元素，把 color 值调深一点更实际。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
