:active伪类按不下去是因为触发时间极短且易被覆盖，需配合transform+box-shadow过渡动画实现真实压感；移动端需touch-action: manipulation，IE需tabindex和filter降级，复杂交互建议JS接管。

active 伪类为什么按不下去？

直接写 :active 却没压感，大概率是被其他样式覆盖了，或者触发条件不对。浏览器只在鼠标按下（或触摸开始）到松开前那一瞬间应用 :active，时间极短，纯靠它做“按压”效果几乎不可见——必须配合 transform、box-shadow 和过渡动画才能形成视觉反馈。

• 确保没有更高优先级的 :hover 或内联样式强行重置 transform 或 box-shadow
• 移动端需额外加 touch-action: manipulation，否则 iOS Safari 可能延迟或跳过 :active
• :active 不会冒泡，也不能用 JavaScript 监听，别试图用 onclick 模拟它来“增强”按压感

用 transform + box-shadow 做真实按压位移

物理按钮按下时会下沉、边缘阴影变厚变近——这得靠两个属性联动：transform: translateY(2px) 模拟下沉，box-shadow 改为更短的模糊半径和更小的偏移，让阴影“贴住”按钮底边。

button {
  padding: 12px 24px;
  border: none;
  background: #4a6fa5;
  color: white;
  border-radius: 6px;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

• 过渡时间建议 ≤ 0.15s，太慢像卡顿，太快人眼难捕捉
• 不要只改 transform 而忽略 box-shadow，单侧变化会让按钮看起来“悬空”而非“下压”
• 避免用 scale 缩放模拟按压，会挤压文字、破坏布局流

兼容老浏览器的降级方案

IE11 及更早版本不支持 :active 在非 <a> 元素上生效（除非加 tabindex），且不支持 transform 过渡。真要兼容，得用 JS 补丁。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 给按钮加 tabindex="0"，让 IE 触发 :active
• 对 IE11 用 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85) 做简单透明度反馈（仅作 fallback）
• 现代项目建议直接放弃 IE，但若必须支持，用 @supports (transform: translateY(0)) 包裹高级样式，避免污染基础渲染

移动端 touchstart/touchend 的干扰问题

在 iOS Safari 上，:active 默认有约 300ms 延迟，且可能被 click 事件打断。如果按钮绑了 onclick，松手瞬间样式会闪回，压感断裂。

立即学习“前端免费学习笔记（深入）”；

• 加 cursor: pointer 强制触发 :active（部分安卓机型需要）
• 避免同时监听 touchstart 并手动加 class，否则和 :active 冲突，导致双倍位移或无法恢复
• 真正要精细控制，就弃用 :active，改用 ontouchstart/ontouchend 切换 class，但代价是增加 JS 维护成本

实际最难的部分不是写那几行 CSS，而是判断什么时候该信 :active、什么时候必须用 JS 接管——尤其当按钮嵌套在滚动容器里，或同时响应 drag 事件时，:active 会悄无声息地失效。