Bootstrap卡片加shadow-sm无阴影，主因是渲染条件未满足：元素需有尺寸（非inline，可加d-block）、父容器不能overflow:hidden裁剪、卡片须有内容或内边距撑开，且未被box-shadow:none!important覆盖。
Bootstrap卡片默认不带阴影，shadow-sm、shadow、shadow-lg 这些类能直接生效，但前提是卡片有尺寸、没被裁剪、且没被其他样式覆盖。
为什么加了 shadow-sm 却看不到阴影
不是类写错了，而是渲染条件没满足：
- 卡片是
display: inline（比如纯文字没换行、或图片未设d-block），得先加d-block或flex类让它“撑开” - 父容器用了
overflow: hidden（常见于.card-group、.container-fluid或自定义 wrapper），阴影会直接被截断 - 卡片本身没内容、没内边距、没高度，
box-shadow在空元素上不渲染——临时加个bg-light p-3就能验证 - 项目里自定义 CSS 用
box-shadow: none !important全局清除了，或者 Sass 中设了$enable-shadows: false
用 shadow- 类和自定义 box-shadow 的关键区别
内置类省事但死板；自己写 CSS 灵活但要管优先级和适配：
-
shadow-sm对应0 .125rem .25rem rgba(0,0,0,.075)，适合轻量浮起；shadow-lg是0 1rem 3rem rgba(0,0,0,.175)，比 v4 更重 - 想改颜色、加内阴影、调方向偏移（比如只下边有影），
shadow-类完全做不到，必须自己写box-shadow值 - 自定义类如
.shadow-card-heavy要确保在 Bootstrap CSS 之后加载；若冲突，加选择器权重（如.card.shadow-card-heavy）比滥用!important更安全 - 深色模式下，硬写
rgba(0,0,0,.15)会发灰，得配合@media (prefers-color-scheme: dark)或 CSS 变量重定义透明度
给卡片加悬停阴影时最常漏掉的一步
只写 .card:hover { box-shadow: ... } 是不够的：
- Bootstrap 卡片默认没有
transition，阴影变化是“啪”一下跳变，得显式加transition: box-shadow 0.2s ease-in-out - 移动端真机点按不会触发
:hover，如果交互依赖阴影变化，得用tabindex="0"+:focus或 JS 切换 class - 别忘了
position: relative和足够z-index，否则阴影可能被兄弟元素遮住 - 如果卡片在
.row或.card-group里，后者默认禁用阴影（设计目标是无缝拼接），要么换布局，要么手动覆盖.card-group .card的box-shadow
真正麻烦的不是怎么加阴影，而是阴影在哪失效、为什么失效、以及失效时你根本没意识到它本该出现——检查 overflow、display、height 和加载顺序，比反复调参数有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
