纯 CSS 可实现可信三维投影按钮，关键在于光源方向、阴影层次与位移反馈三者同步：box-shadow 必须亮边在前暗影在后，:active 时同步收缩 border-bottom 并 translateY 下沉，移动端需防闪白、热区丢失及深色主题层次弱化。
直接说结论：纯 CSS 就能做出可信的三维投影按钮，关键不是堆效果，而是控制光源方向、阴影层次和位移反馈三者同步——否则按钮不是“立起来”，而是“浮在页面上”或“跳起来”。
box-shadow 的书写顺序决定立体感成败
很多人的按钮看起来扁平，是因为 box-shadow 写反了。浏览器按从左到右顺序渲染多层阴影，必须先写顶部高光（模拟光源直射），再写底部投影（模拟受压阴影）：
- 正确顺序：
box-shadow: 0 -2px 2px #fff, 0 4px 8px rgba(0,0,0,0.2)（亮边在上，暗影在下） - 写反就失效：
box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 -2px 2px #fff→ 暗影盖住亮边，体积感崩塌 - 移动端建议把高光的
blur控制在1px–2px，避免糊边；深色背景上，高光改用#f0f0f0而非纯白，更自然
:active 状态必须同步收缩 border-bottom 和下沉 transform
只改背景色或 opacity，用户根本感知不到“按下”。真实按压是结构压缩+视觉下沉：
- 默认状态设
border-bottom: 3px solid #2b8bc6，模拟凸起底边 - :active 时同步改成
border-bottom: 1px solid #2b8bc6+transform: translateY(2px) - 过渡只锁定这两个属性：
transition: transform 0.15s, box-shadow 0.15s, border-bottom 0.15s，别用all，否则文字抖动或边框闪烁 - 注意：border-bottom 的颜色要和主色调协调，别用纯黑，否则像“裂开”
移动端点击闪白和热区丢失怎么防
桌面端看着好，手机一碰就失效，多半栽在这几处：
立即学习“前端免费学习笔记（深入）”；
- 必须加
-webkit-tap-highlight-color: transparent，否则 iOS 点击闪白覆盖整个按钮 - 别设固定
width/height，用padding+line-height自适应文字长度，否则小屏上文字溢出或热区被裁 - border-bottom 宽度别超
4px，box-shadow 的blur别超6px，否则手指触控时边缘模糊、误点率飙升 - 深色主题下，
box-shadow的暗影用rgba(0,0,0,0.15)而非0.3，不然和背景融成一块，失去层次
最容易被忽略的，是阴影顺序和 :active 位移方向——写反了，按钮就不是“按下去”，而是“弹起来”。做之前先盯住光源：你默认是从正上方打光，所有明暗、位移都得服从这个逻辑。
