真正立体按钮需两层外阴影：顶部高光（负v-offset）在前，底部投影在后，如box-shadow: 0 -2px 0 2px #fff, 0 3px 6px rgba(0,0,0,0.15)；hover和active状态须同步调整v-offset、blur及inset阴影，并单独声明transition。
box-shadow 怎么写才不是“浮在页面上”
单层 box-shadow: 0 4px 8px rgba(0,0,0,0.2) 只会让按钮像贴纸一样飘着，根本不是立体。真正凸起靠的是方向感和明暗对比。
必须用两层外阴影，且顺序不能错：
-
box-shadow: 0 -2px 0 2px #fff, 0 3px 6px rgba(0,0,0,0.15)—— 前面是顶部高光（负 vertical offset），后面是底部投影 - 高光必须写在前面，否则会被投影盖住；#fff 在深色背景上要换成
rgba(255,255,255,0.3)避免刺眼 - 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 状态下 box-shadow 必须联动哪些值
只改背景色或只加 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），外阴影弱化（0 1px 3px rgba(0,0,0,0.1)），内阴影加深（inset 0 2px 4px rgba(0,0,0,0.2)） - 过渡必须单独声明：
transition: transform 0.18s, box-shadow 0.18s；写transition: all会导致其他属性抢节奏
border-radius 和 text-shadow 怎么配合增强边缘立体感
立体感藏在边缘，不在渐变中心。边框和文字阴影不协同，按钮就容易显得“假”。
-
border-radius别设太大，推荐6px或8px；超过12px易臃肿，削弱结构感 - 别完全去掉边框：
border: 1px solid rgba(255,255,255,0.3)能模拟高光边缘线，深色背景换为rgba(0,0,0,0.2) -
text-shadow要匹配光照方向：0 1px 0 #fff让文字“浮”在表面；深色背景则用0 -1px 0 #000模拟顶光压痕 - 多层文字阴影更稳：
text-shadow: 0 1px 0 #fff, 0 2px 2px rgba(0,0,0,0.2)
移动端 :active 不触发、父容器裁切阴影怎么办
真机测试常发现点击没反馈，或者按下时阴影被截掉半截——这不是代码写错了，是环境限制。
- 优先用语义化
<button>，它原生支持:active；若必须用<div>，加空属性ontouchstart=""绕过 300ms 延迟 - 补上
cursor: pointer和touch-action: manipulation，提前激活点击态 - 父容器设了
overflow: hidden？检查是否在卡片、Modal 底部等区域；改为overflow: visible或加足够padding-bottom - flex 容器里慎用
align-items: center+overflow: hidden组合，极易误裁:active时上偏的阴影
:active 的位移方向设错了——一正一负，就差一个物理直觉。 
