纯css立体按钮的关键在于border-bottom与box-shadow协同模拟光源：border-bottom作受压面投影，box-shadow需按“上高光（0 -2px）、下投影（0 3px）”顺序书写；:active时同步收缩border-bottom、减小阴影、添加transform: translatey(2px)下沉，三者构成按压闭环。
纯 CSS 就能做出有真实按压感的立体按钮，关键不是加多少效果，而是 border-bottom 和 box-shadow 的方向、顺序、数值必须协同模拟物理光源。
为什么只用 border-bottom 模拟凸起会失败
单独给按钮加 border-bottom: 5px solid #2b8bc6（如某些旧教程），看起来像“垫高”或“贴纸边缘”，用户根本感觉不到“凸起”，更别说“按下去”。因为缺少垂直方向的明暗对比和位移反馈，视觉上没有体积感。
- 它只是加了一条粗线，没模拟光源从上方打来的高光与投影
- 没有
box-shadow配合，按钮会显得扁平甚至悬浮 - 移动端点击时无状态变化，交互断层
border-bottom + box-shadow 双向嵌套怎么写才不浮在页面上
真正让按钮“立起来”的写法，是把 border-bottom 当作受压面的“压缩投影”，再配合两层外阴影：浅色高光在上、深色投影在下，且顺序不能错。
- 高光必须写在前面：
box-shadow: 0 -2px 0 2px #fff（负 vertical offset 表示顶部亮边） - 投影紧随其后：
, 0 3px 6px rgba(0,0,0,0.15)（正 vertical offset 表示底部暗影） -
border-bottom值要略小于常态阴影的 vertical offset，比如设为3px，:active时收缩到1px，强化“被压扁”感 - 别用
inset阴影替代border-bottom——它容易糊掉边缘，削弱结构
:active 状态下 border-bottom 和 box-shadow 必须同步收缩
只改背景色或加个 opacity，用户完全感知不到“按下”。真实按压是下沉+受压变形，所以这两项必须联动：
- 用
transform: translateY(2px)向下位移（不是向上！写反就成“弹起”） -
box-shadow改为更小更锐：0 1px 3px rgba(0,0,0,0.2) -
border-bottom从3px减到1px，模拟受力压缩 - 过渡只锁定这两个属性：
transition: transform 0.18s, box-shadow 0.18s, border-bottom 0.18s；写all容易拖慢其他无关动画
移动端适配时 border-bottom 宽度和阴影 blur 值要收敛
大尺寸 border-bottom（如 6px+）或高模糊值（blur > 12px）在小屏上会吞掉点击热区，尤其手指触控时误操作率明显上升。
- 推荐
border-bottom: 2px起步，最大不超过4px -
box-shadow的blur控制在3px–6px，保证阴影边界清晰可识别 - 深色背景上，
border-bottom颜色别用纯黑，改用#333或#444，避免割裂感 - 别给按钮设固定
width/height，靠padding和line-height自适应文字长度
最容易被忽略的是阴影书写顺序和 :active 的位移方向——写反了，按钮就不是“按下去”，而是“跳起来”。border-bottom 不是装饰线，它是受压面的视觉锚点，必须和阴影、位移构成闭环逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
