真正“凸起来”需双层外阴影：box-shadow: 0 2px 0 2px #ccc, 0 -2px 0 2px #fff，一深一浅模拟受光与高光；hover时减y偏移、增模糊并加内阴影反光，active时y偏移为负、弱化外影加深内影，且transition须单独声明box-shadow。
box-shadow 怎么写才能让按钮真正“凸起来”
单层 box-shadow: 0 4px 8px rgba(0,0,0,0.2) 只会让按钮浮在页面上，不是立体。真立体靠的是「方向感+层次感」：外下阴影模拟受光面，外上或内阴影模拟高光/压痕。
推荐组合写法：
-
box-shadow: 0 2px 0 2px #ccc, 0 -2px 0 2px #fff—— 双向外阴影，一深一浅，直接模拟凸起轮廓 - 更稳妥的渐进式写法：
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.15), 0 1px 2px -1px rgba(0,0,0,0.1)，避免 IE11 兼容问题 - 深色背景慎用默认灰黑阴影，改用同色系暗化值，比如深蓝按钮配
rgba(0,0,0,0.4)
:hover 和 :active 状态下 box-shadow 必须联动改哪些值
只改 background-color 或只加 transform: translateY(-2px)，视觉上会割裂——按钮动了，影子没动，像被拎起来而不是按下去。
-
: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: box-shadow 0.1s ease，不能只写transition: all，否则和其他属性抢缓动节奏
移动端点击没反馈？:active 不触发的三个补救点
iOS Safari 和部分安卓浏览器对 :active 响应有延迟或不触发，尤其用 <div> 代替 <code><button></button> 时更明显。
- 优先用语义化
<button></button>，它原生支持:active且无障碍友好 - 若必须用
<div>，加 <code>ontouchstart=""属性（空值即可），绕过 300ms 延迟 - 补一层
cursor: pointer和touch-action: manipulation，提前激活点击态 - 检查按钮父级是否含
overflow: hidden，如有，改为overflow: visible或加足够padding-bottom - 避免在 flex 容器中用
align-items: center+overflow: hidden组合，容易误裁 - 测试务必在真机点按，模拟器常无法还原
:active的实际持续时间与位移量
父容器 overflow: hidden 导致按下效果被裁切怎么办
常见于卡片内部按钮、Modal 底部操作区——:active 时 box-shadow 向上偏移（v-offset = -2px），但父元素设了 overflow: hidden，阴影直接被截掉半截。
box-shadow 值可能完全失效，需要媒体查询单独适配。
