CSS 问题记录：:active 状态下背景超出 border-radius 的圆角区域

CSS 问题记录：:active 状态下背景超出 border-radius 的圆角区域

问题描述

在开发中，我们经常使用 :active 伪类来为可点击元素添加激活状态的样式。但在某些情况下，当元素设置了 cursor: pointer 并触发 :active 状态时，背景颜色会填充整个矩形区域，而忽略了原本设置的 border-radius 圆角效果。

这会导致视觉上不符合预期，尤其是在按钮或菜单项等需要圆角设计的 UI 元素中。

---

复现场景

常见情况

• 使用了 cursor: pointer 的元素
• 设置了 :active 样式（如改变背景色）
• 使用了 border-radius 来创建圆角
• 在移动端或部分浏览器中（如 Chrome）更常见

---

示例代码

初始样式（问题复现）

.menu-bar-item {
    display: flex;
    padding: 0 0.75rem;
    color: white;
    background-color: rgba(120, 211, 247, 1);
    border-radius: calc($menu-bar-height - 1rem); /* 圆角 */
    cursor: pointer; /* 可点击 */
}

.menu-bar-item:active {
    background-color: rgba(0, 0, 0, 0.2); /* 激活态背景 */
}

在这种情况下，激活时的背景可能会覆盖整个矩形区域，而不是被限制在圆角区域内。

---

解决方案

添加 -webkit-tap-highlight-color

这是最直接且有效的解决方案，尤其适用于移动端浏览器：

.menu-bar-item {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 移除默认高亮 */
}

这个属性用于控制 iOS Safari 和其他基于 WebKit 内核的浏览器 在触摸点击时显示的默认高亮效果。将其设为透明可以避免干扰你的自定义样式。

---

总结

问题原因	解决方式
浏览器默认的 :active 高亮行为导致背景溢出圆角	使用 -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

完整示例代码（推荐写法）

.menu-bar-item {
    display: flex;
    padding: 0 0.75rem;
    color: white;
    background-color: rgba(120, 211, 247, 1);
    border-radius: calc($menu-bar-height - 1rem);
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 移动端适配 */
}

.menu-bar-item:active {
    background-color: rgba(0, 0, 0, 0.2);
}

---

补充说明

如果你希望完全控制激活状态的行为（例如实现更复杂的动画或样式变化），也可以考虑使用 JavaScript 动态添加和移除一个 .active 类来替代 :active 伪类，这样可以更好地跨浏览器兼容并避免默认样式的干扰。