卡片底部按钮必须用flex布局撑开空间，即.card-body设d-flex flex-column，按钮加mt-auto；绝对定位需父容器position: relative；drop-shadow()比box-shadow更贴合边缘，且父容器不能overflow: hidden。
卡片底部按钮必须用 flex 布局撑开空间
直接给按钮加 margin-top: auto 或 position: absolute 很容易失效——因为卡片内容高度不固定，父容器没启用弹性布局时，auto 会当普通外边距处理。真正起作用的是让卡片内容区成为 flex 容器，并用 justify-content: space-between 推动按钮到底部。
-
.card-body必须设为display: flex; flex-direction: column; - 内部元素（标题、描述等）自然流式排列，按钮单独放在最后，无需额外 class
- 避免对
.card或.card-body设置height: 100%，它会截断 flex 的自动伸缩行为 - 如果卡片含图片，确保图片高度不撑爆容器；可用
max-height+object-fit: cover控制
深度投影优先选 drop-shadow() 而非 box-shadow
卡片本身可能有圆角、透明背景或 SVG 图标，box-shadow 只包围矩形盒子，阴影会漏边、生硬；drop-shadow() 基于实际像素轮廓投射，能精准贴合边缘，更适合卡片底部按钮这种需要“浮出感”的场景。
- 写法：
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); - 多层景深可叠加：
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) drop-shadow(0 6px 16px rgba(0,0,0,0.08)); - ⚠️ 父容器不能有
overflow: hidden，否则阴影被裁掉——检查卡片、网格列、编辑器 wrapper 是否意外设置了该属性 - 移动端慎用模糊值 >12px，高 DPI 屏上易糊掉点击热区
:active 状态必须同步位移 + 阴影收缩
只改背景色或透明度，用户根本感觉不到“被按下”。真实按压是物理下沉+受压变形，CSS 必须同时响应这两点，否则立体感崩塌。
-
transform: translateY(2px)：向下位移，不是向上 -
filter中的drop-shadow()模糊值要收窄，例如从8px降到3px，偏移保持不变 - 过渡必须显式锁定：
transition: transform 0.12s, filter 0.12s;，别用all，某些浏览器对filter插值不稳定 - 按钮文字可加轻微
text-shadow: 0 1px 0 #fff强化表面浮出感，深色背景则换为0 -1px 0 #000
Bootstrap 卡片里按钮靠底的常见翻车点
用 Bootstrap 的 mt-auto 或 align-self-end 时，失败往往不是类名写错，而是底层布局没激活。
-
.card-body必须带d-flex flex-column，仅mt-auto不生效 - Vue/React 中动态渲染卡片时，确保
services数组稳定；数据重置可能触发 flex 重计算延迟，造成按钮短暂上跳 - 不要在
.card上加min-height同时又设flex: 1，二者冲突会导致底部留白异常 - 如果按钮文字换行，
align-self-end会让整行右偏；此时应改用text-align: right+width: 100%更可控
最常被忽略的是父容器的 overflow 和 flex 根节点的激活顺序——阴影被裁、按钮悬空，问题八成出在这两处，而不是投影参数本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
