不可行，因为-webkit-tap-highlight-color不支持CSS变量，必须硬编码rgba()或transparent；真正可控的是用:active+CSS变量+transition实现的自定义反馈样式。
移动端点击态遮罩用 CSS 变量控制是可行的，但直接用 var(--tap-color) 配合 :active 无法实现“遮罩”效果——因为 :active 本身不生成覆盖层，它只是状态切换；所谓“遮罩”，实际是系统级的 -webkit-tap-highlight-color，而这个属性不支持 CSS 变量。
为什么 -webkit-tap-highlight-color 不能用 CSS 变量
该属性值必须是硬编码的 rgba() 或 transparent，浏览器解析时不会计算 CSS 变量。写成 -webkit-tap-highlight-color: var(--tap-color); 在所有已知 iOS/Android 浏览器中都会退化为默认灰色高亮或完全失效。
- Chrome、Safari、WebView 均不支持变量注入到该属性
- 即使在
:root中定义了--tap-color: rgba(0, 120, 255, 0.1)，也无法被-webkit-tap-highlight-color消费 - 尝试用 JS 动态写入
style.setProperty也无效——该属性只在 CSS 解析阶段读取，运行时修改无响应
真正能用变量控制的“点击态反馈”是什么
能用变量控制的，是**你亲手写的自定义反馈样式**，比如背景色变化、缩放、内阴影等，它们依赖 :active + transition，且完全受 CSS 变量支配。
- 把颜色、透明度、缩放比例抽成变量：
--active-bg: #e0e0e0;、--active-scale: 0.98; - 在
:active里引用：background-color: var(--active-bg); transform: scale(var(--active-scale)); - 全局统一时写在
:root；局部覆盖可加在组件选择器上，比如.btn-danger:active { --active-bg: #dc3545; } - 务必搭配
transition，否则变量生效但动画卡顿，用户感知为“没点上”
:active + 变量方案容易踩的三个坑
变量本身没问题，但组合使用时极易出错：
立即学习“前端免费学习笔记（深入）”；
- 没加
touch-action: manipulation：iOS 上:active仍延迟 100–300ms，变量再灵活也白搭 - 元素不可聚焦：纯
<div>即使写了:active和变量，在 iOS Safari 真机上大概率不触发——得加role="button" tabindex="0"或ontouchstart="" - 父容器拦截事件：如果父级有
pointer-events: none或overflow: hidden且裁剪了触摸区域，:active根本不会进入激活态，变量自然不生效
最麻烦的不是变量写不对，而是你以为改了 --tap-color 就能控制高亮，结果真机一测还是那层碍眼的灰——那根本不是你能用 CSS 变量动的地方。要真正可控的反馈，得放弃系统高亮，老老实实用 :active + 变量 + transition + touch-action 这套组合拳，一个都不能少。
