box-shadow 是实现纯视觉凸起效果的核心，因其通过多层阴影（顶部浅色高光+底部深色内阴影）制造光影错觉，配合 :active 状态动态调整、text-shadow 强化压印感及 touch-action 保障响应即时性，共同构建可信立体感。
为什么 box-shadow 是实现纯视觉凸起效果的核心
纯 CSS 凸起按钮不依赖任何图片或 3D 引擎，本质是用光影错觉模拟立体感。关键不是“画出凸起”，而是让眼睛相信它凸出来了——这靠的是 box-shadow 的多层阴影叠加：一层深色内阴影模拟凹陷边缘（实际反向强化凸起感），一层浅色外阴影模拟高光溢出。
常见错误是只加单层 box-shadow 或用错颜色顺序。比如 box-shadow: 0 2px 4px rgba(0,0,0,0.2) 看起来只是下沉，不是凸起；真正起作用的是带 inset 的组合：
box-shadow: 0 -2px 4px rgba(255,255,255,0.6), /* 顶部高光 */ 0 2px 4px rgba(0,0,0,0.2) inset; /* 底部内阴影 */
注意：inset 必须写在最后，否则整条声明失效；rgba() 的 alpha 值太大会发灰，建议高光用 0.4–0.7，内阴影用 0.15–0.25。
按钮状态切换时必须重置 box-shadow 而非仅改颜色
用户点击时若只改变背景色，凸起感会断裂——因为阴影方向和强度没随交互变化。真实按钮按下时，高光减弱、内阴影加深，形成“被按下去”的错觉。
-
:active状态下移除顶部高光，加强内阴影：box-shadow: 0 1px 2px rgba(0,0,0,0.25) inset; - 别用
transition: background-color单独过渡，要连同box-shadow一起过渡：transition: box-shadow 0.1s, background-color 0.1s; - 悬停态（
:hover）可微调高光亮度，但幅度要小（比如把rgba(255,255,255,0.6)改成0.7），否则像弹跳而非凸起
字体和边框细节决定凸起是否“可信”
再好的阴影也会被粗糙的文本破坏。凸起按钮的文字要有轻微“压印感”：用 text-shadow 模拟光线从左上角照射产生的微弱投影，同时禁用默认的粗边框。
- 去掉默认
border，改用outline: none防止焦点环干扰立体感 - 文字阴影只加单层：
text-shadow: 0 1px 0 rgba(255,255,255,0.4);（方向必须与主高光一致） - 字体选无衬线体（如
system-ui），避免衬线在小尺寸下模糊阴影边界 - 行高（
line-height）设为1或略大于1，防止文字“浮”在按钮表面
移动端触摸反馈需要额外处理 touch-action
在 iOS Safari 和部分安卓浏览器里，快速点击可能触发双击缩放或延迟响应，导致凸起动画卡顿。这不是样式问题，而是浏览器默认行为干扰了 :active 状态的即时生效。
必须给按钮加：touch-action: manipulation; —— 这句声明告诉浏览器“这是操作控件，别做缩放/滚动”，:active 阴影才能立刻响应。漏掉这行，用户会觉得按钮“反应迟钝”，立体感直接崩塌。
另外，user-select: none 也得加上，避免长按误触发文字选择覆盖阴影效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
