按钮按下阴影显假因:active无过渡，需用Less变量和Mixin统一管理偏移、颜色、时长；深色/浅色主题动态调整阴影；必加transition和cursor:pointer；避免嵌套@keyframes及状态持久化。
按钮按下时的 box-shadow 偏移为什么总显得假？
因为纯 CSS 的 :active 状态太“瞬时”，没有过渡缓冲，人眼会感知为生硬跳变。Less 本身不解决动画逻辑，但能帮你把偏移值、阴影色、过渡时长这些变量统一管理，避免每次改一个按钮都要手动算三处数值。
实操建议：
- 偏移量别用固定像素（比如
1px），改用相对单位：@btn-press-offset: 0.0625rem（适配高 DPI 屏） -
box-shadow的模糊半径和颜色要随背景动态调整——深色按钮用浅灰+小模糊，浅色按钮用深灰+稍大模糊 - 必须加
transition: all 0.1s ease，否则:active变化就是闪断，不是“按下感”
用 .btn-press() Mixin 统一处理不同主题按钮
你不会只为一种颜色写按下效果。Mixin 的价值在于把“按下的视觉逻辑”抽出来，让 .btn-primary、.btn-outline 各自传入自己的主色、边框色、背景色，生成对应偏移阴影。
常见错误现象：.btn-outline 按下后阴影盖住边框，或偏移方向反了（比如向上浮而不是向下压）。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- Mixin 参数至少包含：
@bg、@border、@shadow-color、@offset - 阴影用
inset+outset组合：内阴影模拟凹陷，外阴影模拟按压投影（例：box-shadow: inset 0 @offset @offset rgba(0,0,0,0.1), 0 -@offset @offset @shadow-color） - 深色主题下，
@shadow-color改用fade(#fff, 15%)，别硬写rgba(255,255,255,0.15)—— 否则换主题时漏改
为什么 :active 在移动端经常失灵？
因为 iOS Safari 默认禁用非可点击元素的 :active 样式，除非该元素有 cursor: pointer 或监听了 touchstart。Less 编译不出 JS，所以这个坑得在调用 Mixin 时就补上。
实操建议：
- 所有用到
.btn-press()的类，额外加一行cursor: pointer - 如果按钮是
<button></button>，没问题；但如果是<div class="btn">，必须加 <code>role="button" tabindex="0"，否则无障碍和移动端都失效 - 不要依赖
:active做状态持久化（比如“按住不放就持续触发”），那是 JS 的事；CSS 只管那一帧的反馈 - 动画帧定义写在全局层（比如
base/animations.less），只定义一次@keyframes btn-press - Mixin 里只负责绑定
animation: btn-press 0.2s ease-out和重置transform - 如果真需要差异化动画曲线，用
animation-timing-function参数传入，别复制整个@keyframes
性能陷阱：别在 Mixin 里嵌套 @keyframes
有人想用 Mixin 自动生成按下动画帧，结果每个按钮类都重复输出一遍 @keyframes btn-press-anim，CSS 文件体积暴涨，且浏览器无法复用动画定义。
实操建议：
最常被忽略的是：偏移量必须和父容器的 transform-origin 对齐。按钮如果用了 scale(0.98) 微缩放来强化按下感，那 transform-origin 得设成 center，否则边缘会错位。
