:active仅在按下瞬间生效，需通过transform缩放、内阴影等形变增强反馈；确保元素可交互（role/tabindex）、禁用300ms延迟（touch-action）、正确设置transition和选择器权重，并排查移动端兼容性问题。

:active 本身不“点击后”生效，它只在鼠标按下或手指按住的瞬间存在；所谓反馈，是靠视觉变化让人脑补出“被按下去”的物理感。纯改 background-color 或 color 几乎无效，尤其在小屏或强光下——人眼对位置和形变更敏感。

为什么按钮点了没反应？先查这三件事

不是 :active 写错了，而是它根本没被浏览器认作可激活元素：

• 元素没声明交互意图：用 <div> 模拟按钮，必须加 <code>role="button" tabindex="0"，否则 iOS Safari 直接跳过 :active
• 移动端被默认策略拦住：iOS Safari 会等 300ms 判断是否双击，导致首次触摸延迟响应；加 touch-action: manipulation 能提前告诉浏览器“这是单点操作，别等”
• 样式被覆盖或压根没触发重绘：比如只改 color，但按钮文字在深色背景上变浅后几乎看不出；或者父容器设了 overflow: hidden，把缩放后的边缘切掉了

真正有效的按压反馈，只改 background-color 是不够的

人眼对位置和形变比颜色更敏感，纯色变化容易被忽略：


html-ppt-to-pdf
将使用 `
` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。
下载
• 必加 transform: scale(0.96) 或 transform: translateY(1px)——缩放比位移更稳妥，iOS 上 translateY 有时会触发重排闪烁
• 配合 box-shadow: inset 0 1px 2px rgba(0,0,0,0.15) 模拟受压阴影，比单纯变暗背景更有“下陷感”
• 所有动画属性必须在常态选择器里加 transition，例如 button { transition: transform 0.06s, background-color 0.08s; }；写在 :active 里无效

:active 样式不生效？优先排查选择器权重和层级

:active 是伪类，它的样式容易被后续声明、更高权重的选择器覆盖。尤其当用 .btn:hover:active 这类组合时，一旦 :hover 的规则里定义了颜色或背景，:active 就可能被压制：

• 把 :active 放在 :hover 后面写，例如 .btn:hover { } .btn:active { }
• 避免用 !important，改用更具体的选择器，比如 button.btn:active 比 .btn:active 权重高
• 用浏览器开发者工具的 “Styles” 面板，勾选 :active 强制状态，看哪条样式被划掉——被划掉的就是被覆盖了

移动端要注意 active 失效问题

部分 iOS Safari 和老版安卓浏览器默认不触发 :active，需手动启用：

• 给按钮加 tabindex="0"（尤其在非表单上下文中）
• 强制启用触摸反馈：在 CSS 中添加 -webkit-tap-highlight-color: transparent;，同时确保父容器没设 pointer-events: none
• 更稳妥的做法：监听 touchstart/touchend 动态加 class，但纯 CSS 场景优先用上面两个技巧

复杂点在于：:active 状态持续时间极短（毫秒级），且无法在 touchend 后保持；如果需要“按下后保持”或“点击后展开”，必须用 JS 切换 class，不能只靠 :active。