直接加 shadow-sm 和 overflow-y: auto 时阴影消失，是因为 overflow 裁剪边界会将 box-shadow 挡在可视区外；正确做法是外层容器加 position: relative + z-index + shadow-sm，内层设 overflow-y: auto 和响应式 max-height。
为什么直接加 shadow-sm 和 overflow-y: auto 阴影会消失
不是类没生效，是滚动容器自身裁剪了阴影——overflow-y: auto 触发的裁剪边界会把 box-shadow 挡在可视区外。尤其当内容刚好填满容器高度时，阴影完全压在边缘外侧，肉眼不可见。
常见错误：给滚动区（比如 <div class="p-3 shadow-sm">）直接加边框阴影，却没处理层叠关系。正确做法必须拆开：外层负责阴影 + 定位，内层负责滚动 + 高度控制。<ul>
<li>外层容器加 <code>position: relative 和 z-index: 1，再套 Bootstrap 的 shadow-sm 或 shadow
overflow-y: auto、max-height，且不能有 overflow: hidden 父级拦截shadow-none 覆盖默认样式后忘了重加——调试时最常漏这一步怎么写响应式的 max-height 才不崩布局
写死 max-height: 400px 在手机上太高、桌面又太矮；靠 h-75 这类工具类又容易因父容器 padding 变化导致实际可用高度突变，滚动条跳闪甚至失效。
实操建议优先用视口计算，再配合断点微调：
- 主高度用
max-height: calc(100vh - 200px)（减去导航栏、标题等固定高度） - 小屏下（
@media (max-width: 576px)）单独重设：max-height: calc(100vh - 160px)，避免顶部留白过多 - 如果滚动区在
.modal-body里，直接加内联样式：style="max-height: 70vh; overflow-y: auto;"，别动.modal-dialog - 表格类内容要额外加
min-width: 0，防止flex子项撑宽导致横向滚动意外出现
边框和阴影怎么安全叠加不冲突
Bootstrap 的 border 类和 shadow 类可以自由组合，但有两个硬性前提：图片或容器必须是 display: block，且父容器不能有 overflow: hidden。
对于垂直滚动块，重点不是“加边框”，而是确保边框不被滚动裁剪、不干扰阴影渲染：
- 给外层容器加
border border-gray-200（或border-1），不是给滚动区本身加 - 滚动区内若含
table，必须设table-layout: fixed+word-break: break-word，否则边框错位 - 移动端 Safari 对
overflow-y: scroll渲染有延迟，旧版需加-webkit-overflow-scrolling: touch - 深色模式下，
shadow-sm的默认透明度（rgba(0,0,0,.075)）在暗背景上几乎不可见，得用@media (prefers-color-scheme: dark)单独改颜色
移动端 Safari 和 iOS 滚动阴影错位怎么修
真机上常见现象：滚动到顶部/底部时，阴影突然偏移、拉长，或只在部分区域显示——这不是 Bug，是 Safari 对 position: relative + overflow + box-shadow 的合成渲染逻辑差异。
关键修复点不在 JS，而在 CSS 层级和触发条件：
- 外层容器必须有明确
border-radius: 0（哪怕你不用圆角），否则 Safari 会误判裁剪区域 - 滚动区加
will-change: transform可强制开启硬件加速，减少错位 - 别用
filter: drop-shadow()替代box-shadow——它在 iOS 上有锯齿且不响应z-index - 如果滚动块嵌在
.card里，确认.card没设overflow: hidden；有则加overflow: visible !important覆盖
复杂点不在代码多寡，而在每一层容器的 overflow、position、z-index 是否形成闭环——漏掉任意一环，阴影就可能卡在半空。
