纵深感靠多层box-shadow物理逻辑对齐：顶部高光（0 -2px 0 1px rgba(255,255,255,0.4)）、主体过渡（0 2px 4px rgba(0,0,0,0.15)）、底部挤压（0 4px 0 rgba(0,0,0,0.1)），顺序不可逆；:active需同步transform translatey(2px)与阴影加厚变柔；深色背景用同色系暗化值，避免纯黑割裂；移动端模糊值宜控在3px–6px。
纵深感不是靠“加阴影”就能出来的，而是靠多层 box-shadow 的物理逻辑对齐：顶部高光、主体过渡、底部挤压三者必须方向一致、顺序不可逆、数值可推演。
多层 box-shadow 的书写顺序和物理含义
浏览器按从左到右顺序渲染阴影，后写的会覆盖前写的——所以高光必须在最前，投影在最后。写反了，按钮就“浮”在背景上，而不是“立”在页面里。
- 第一层（最前）是顶部高光：
0 -2px 0 1px rgba(255,255,255,0.4)，负 vertical offset 表示光从上方打来 - 第二层是主体过渡：
0 2px 4px rgba(0,0,0,0.15)，中等偏移+中等模糊，模拟受光面渐变 - 第三层（最后）是底部挤压：
0 4px 0 rgba(0,0,0,0.1)，零模糊+正偏移，紧贴下沿模拟硬质边缘 - 所有层必须用逗号连写在同一行
box-shadow值里，不能拆成多个声明
:active 状态下 transform 和 box-shadow 必须同步反向变化
只改 background-color 或只加 opacity，用户根本感知不到“按下”。真正可信的按压反馈，是视觉下沉 + 阴影变厚变柔的协同。
-
transform: translateY(2px)让按钮向下位移，制造凹陷错觉 -
box-shadow中每层的 vertical offset 都要增大（比如0 2px→0 4px），模糊半径也同步加宽（4px→8px） -
transition必须写在默认状态，且只锁定这两个属性：transition: transform 0.1s, box-shadow 0.1s - 别写
transition: all——文字颜色或边框变化会拖慢响应，破坏瞬时反馈
深色背景上 box-shadow 颜色不能用纯黑
在 #121212 这类深灰背景上，rgba(0,0,0,0.5) 的阴影不是投影，是割裂画面的“刀痕”。它违背了真实物体在暗环境中的漫反射逻辑。
- 推荐用同色系暗化值，比如深蓝按钮配
rgba(0,0,0,0.4)，深灰按钮配rgb(50,50,60) - 透明度别超过
0.4，否则边界发虚，失去支撑感 - 浅色按钮（如
#f5f5f5）可适当提高对比度，但依然避免rgba(0,0,0,0.6)以上 - 移动端测试时注意：大模糊值（
blur > 10px）会吞掉点击热区，建议控制在3px–6px
最容易被忽略的是阴影顺序和 :active 的位移方向——物理直觉比代码更重要。写完别急着合码，真机点三次，看它是不是“沉下去”，而不是“跳起来”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
