立体卡片式按钮需双层外阴影模拟受光面与高光，深色背景用同色系暗化值，ie11用渐进写法，hover和active须联动v-offset、blur及inset阴影，transition单独声明，注意移动端touch事件、父容器overflow裁切、dom层级锚定、flex布局对齐及深色模式适配。
立体卡片式按钮不是加个 box-shadow 就完事，关键在阴影方向、层级映射和状态联动——单独调一个参数，效果立刻假。
box-shadow 怎么写才真有立体感
单层阴影只是“浮起来”，不是“凸出来”。真正模拟受光面+高光需要双层外阴影，且明度差要明显：
-
box-shadow: 0 2px 0 2px #ccc, 0 -2px 0 2px #fff：下深上浅，直接勾出立体轮廓 - 深色背景慎用默认
rgba(0,0,0,0.2)，改用同色系暗化值，比如深蓝按钮配rgba(0,0,0,0.4) - IE11 兼容场景建议渐进写法：
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.15), 0 1px 2px -1px rgba(0,0,0,0.1) - 别堆参数：超过三层阴影会糊成一团，视觉重心反而丢失
:hover 和 :active 必须同步改哪些值
按钮动了，影子不动，就像被拎起来——这是最常见割裂感来源：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
:hover：v-offset 减小（如2px → 1px），blur 加大（4px → 6px），加一层inset 0 1px 2px rgba(255,255,255,0.4)模拟反光 -
:active：v-offset 必须为负（-2px），外阴影弱化，内阴影加深（inset 0 2px 4px rgba(0,0,0,0.2)） -
transition必须单独声明：transition: box-shadow 0.1s ease，不能只写all - 移动端
:active不触发？补ontouchstart=""+touch-action: manipulation
父容器 overflow: hidden 导致按下效果被裁切
卡片内部按钮或 Modal 底部按钮常踩这个坑：:active 时阴影上移，但被父级截掉半截：
- 检查按钮所有上级元素，只要任意一层含
overflow: hidden，都可能出问题 - 优先改父容器为
overflow: visible，或加足够padding-bottom预留空间 - 特别注意
flex容器中align-items: center+overflow: hidden的组合，极易误裁 - 真机测试比模拟器可靠：iOS Safari 中
:active持续时间极短，位移量容易被忽略
按钮必须是卡片的直接子元素才能锚定到底部
很多“统一尺寸+底部对齐”的失败，根源不在按钮本身，而在它没处在正确 DOM 位置：
- 卡片容器必须设
display: flex; flex-direction: column - 按钮必须是
.card的**直接子元素**（与.card-body、图片等平级），否则margin-top: auto失效 - 尺寸统一靠
padding+font-size+box-sizing: border-box，别写死width/height - 多卡片网格中高低不一？问题通常出在卡片
min-height不一致，或图片未设object-fit: cover
最容易被忽略的是：深色模式下，你写的 #fff 高光可能变成刺眼白点，而 rgba(255,255,255,0.4) 在暗背景下几乎不可见——得用 color-scheme: light dark 或媒体查询动态切换明度值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
