直接加 shadow-sm 或 shadow-lg 没反应，常见原因是卡片容器缺少 position: relative 导致阴影被 overflow: hidden 的父元素裁剪；hover 阴影需用 shadow-hover 类或自定义 css 配合 transition 实现平滑动画；移动端需加 cursor: pointer 或 js 模拟 hover。
为什么直接加 shadow-sm 或 shadow-lg 没反应？
常见原因是卡片容器没设置 position: relative，导致阴影被父元素裁剪（尤其在 overflow: hidden 的容器里）。Bootstrap 的 shadow 工具类本身只控制 box-shadow 值，不处理层叠上下文或溢出逻辑。
实操建议：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 给卡片外层包裹一个
<div class="position-relative">，再把 shadow 类加到卡片本身 <li>检查父级是否设置了 <code>overflow: hidden（比如轮播组件、卡片网格的.row或自定义容器），临时改成overflow: visible测试是否是裁剪问题 - 避免对
.card直接加overflow: hidden后又期望阴影“伸出来”——这在 CSS 里不可能，box-shadow不属于内容流，会被overflow裁掉 - 基础用法：
<div class="card shadow-sm shadow-hover"> —— 默认无阴影，悬停时变 <code>shadow - 想 hover 时更强：加自定义类，例如
shadow-hover-lg，并在 CSS 中写：.shadow-hover-lg:hover { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } - 别混用多个
shadow-*类（如shadow-sm shadow-hover shadow-lg），后面覆盖前面，最终只生效最后一个 - 推荐写法：
.card { transition: box-shadow 0.2s ease-in-out; } .card:hover { box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2); } - 不要只写
transition: all—— 它会过渡所有可动画属性，可能拖慢渲染；明确指定box-shadow更安全 - 时间选
0.2s～0.3s较自然；太短像没动，太长像卡顿 - 如果用了 Sass，可复用 Bootstrap 的
$transition-base变量保持风格统一 - 最轻量解法：给卡片加
cursor: pointer（哪怕只是视觉提示），多数移动端会因此启用 hover 模拟 - 更可靠方案：用 JavaScript 补监听
touchstart和touchend，动态切换类名（如is-hovered），再用 CSS 写.card.is-hovered { ... } - 别依赖
:active替代:hover—— 它只在手指按下瞬间生效，松开就没了，体验断层
hover 时才显示阴影，该用哪个类组合？
Bootstrap 5.3+ 自带 shadow-hover 类，但注意：它只在 :hover 时生效，且默认值是 shadow（中等强度），不是 shadow-sm。如果你需要更细的控制，得自己补 CSS。
实操建议：
自定义 shadow 值时，怎么让 hover 动画更顺滑？
原生 box-shadow 改变时默认无过渡效果，会“啪”一下跳变。必须显式加 transition 才能有缓动。
实操建议：
移动端点按卡片没 hover 效果，怎么办？
纯 CSS 的 :hover 在 iOS Safari 和部分安卓浏览器上，对非 <a></a> 或带 cursor: pointer 的元素可能不触发，尤其没有绑定任何事件监听器时。
实操建议：
