box-shadow是实现按钮厚度感最可控的手段，需用多层内外阴影协同模拟明暗与偏移，border-bottom仅能作极细锚点辅助，无法替代阴影建模、不支持过渡、易在圆角处断裂且无光效。
box-shadow 是实现厚度感最可控的手段，border-bottom 单独用只会加一条线，既不能模拟光效，也无法过渡，还容易和圆角冲突。真要“有厚度”，必须靠多层 box-shadow 配合明暗与偏移——border-bottom 只能当辅助，不能当主力。
为什么 border-bottom 不能直接做出厚度感
很多人试过给按钮加 border-bottom: 2px solid #333，以为能模拟“压下去”的阴影边，结果发现：
- 它只是静态线条，
:hover或:active时无法自然变细/消失，缺乏按压反馈 - 在
border-radius> 0 时，border-bottom会在圆角处断裂或错位，视觉上像“脱胶” - 它不随背景色变化，深色主题下可能完全看不见，也不参与过渡动画
box-shadow 多层写法才是厚度核心
真正起厚度作用的是三类阴影协同：
-
inset 0 1px 0 rgba(255,255,255,0.8)：顶部内阴影，模拟高光边缘 -
0 2px 4px rgba(0,0,0,0.15)：外阴影，模拟按钮投下的基础投影 -
inset 0 -1px 1px rgba(0,0,0,0.1)：底部微内阴影，强化受压感（不是border-bottom的替代，而是光效补全）
顺序很重要：内阴影写前面，外阴影写后面；浏览器按书写顺序叠加，高光必须透出来。
:active 状态必须同步收缩阴影 + 下沉
只改 background-color 或只减 box-shadow 模糊值，用户根本感觉不到“按下去”。真实反馈需要两件事同时发生：
立即学习“前端免费学习笔记（深入）”；
-
transform: translateY(2px)：物理位移，让按钮看起来下沉 -
box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 0 0 #fff：外阴影收窄、内高光弱化甚至清空，模拟受压后形变
过渡必须显式锁定：transition: transform 0.12s, box-shadow 0.12s。别用 all，否则某些浏览器对 box-shadow 插值出错，阴影会跳或闪。
border-bottom 唯一合理用途：微调底部锚点
如果你非要保留 border-bottom，它唯一安全的用法是作为视觉锚点，在默认态下极细（1px）、低对比（rgba(0,0,0,0.05)），且 :active 中立刻设为 transparent。但它不能参与厚度建模，也不能替代任何一层 box-shadow。
最容易被忽略的细节是：所有阴影的 blur 值必须克制。移动端超过 4px 就开始吞点击热区；桌面端超过 6px，边缘发虚，“厚度”就变成“晕开”。
