直接加 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 挡在可视区外。尤其当内容刚好填满容器高度时，阴影完全压在边缘外侧，肉眼不可见。

常见错误：给滚动区（比如

）直接加边框阴影，却没处理层叠关系。正确做法必须拆开：外层负责阴影 + 定位，内层负责滚动 + 高度控制。

• 外层容器加 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。

对于垂直滚动块，重点不是“加边框”，而是确保边框不被滚动裁剪、不干扰阴影渲染：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 给外层容器加 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 是否形成闭环——漏掉任意一环，阴影就可能卡在半空。