<p>阴影常不可见是因为 overflow-y: auto 的裁剪边界限制了 box-shadow 渲染，需外层加 position: relative + z-index 或伪元素模拟；max-height 应用 calc(100vh - 固定高度) 并配合媒体查询微调，滚动区子项加 min-width: 0 防撑宽，iOS 旧版需 -webkit-overflow-scrolling: touch，深色模式需自定义阴影。</p>
直接给卡片加 shadow-sm 和 overflow-y: auto，阴影大概率看不见——不是类没生效，是滚动容器的裁剪边界把阴影挡住了。
为什么 shadow 和 overflow-y 一起用时阴影常“看不见”
这不是 Bug，是 CSS 渲染规则：当元素设了 overflow-y: auto，它的 box-shadow 会受自身裁剪区域限制。尤其内容刚好填满高度时，阴影被压在边缘外侧，肉眼不可见。
- 常见错误：给滚动区（比如
<div class="card p-3 shadow-sm">）直接加阴影，却没处理层叠关系 - 真正起效的组合只有两种：
– 外层容器加position: relative+z-index: 1+shadow-sm，内层设overflow-y: auto和响应式max-height
– 或者用伪元素模拟阴影（::after绝对定位），绕过裁剪限制 - 别在调试时用
shadow-none覆盖后忘了重加——这是最常漏的一步
怎么写响应式的 max-height 才不崩布局
写死 max-height: 400px 在手机上太高、桌面又太矮；只靠 h-75 这类工具类，容易因父容器 padding/margin 变化导致实际可用高度突变，滚动条跳闪甚至失效。
- 主高度优先用视口计算：
max-height: calc(100vh - 200px)（减去导航栏、标题等固定高度） - 小屏下单独微调：
@media (max-width: 576px) { .scrollable { max-height: calc(100vh - 160px); } } - 如果滚动区在
.modal-body里，直接加内联样式：style="max-height: 70vh; overflow-y: auto;"，别动.modal-dialog - 滚动区内若含
<table>或flex子项，务必加min-width: 0，防止撑宽导致横向滚动意外出现
移动端 Safari 的 overflow-y 渲染延迟怎么破
iOS Safari 对 overflow-y: scroll 有渲染延迟，尤其内容含图片或动画时。旧版需手动启用惯性滚动，新版可省略但留着也无害。
- 加
-webkit-overflow-scrolling: touch到滚动容器上（仅 iOS 旧版需要，2023 年后新系统已默认启用） - 深色模式下，
shadow-sm默认透明度（rgba(0,0,0,.075)）在暗背景上几乎不可见，得用自定义box-shadow或覆盖变量 - 滚动容器务必加
style="scroll-behavior: auto;"（显式关闭平滑滚动），避免某些安卓机型白屏或卡顿
最容易被忽略的是外层容器的 position: relative 和 z-index —— 没它，阴影再好看也出不来；其次是小屏下 max-height 的断点微调，光靠工具类撑不住真实设备差异。
