-webkit-tap-highlight-color 区域的圆角

Question

我认为默认（不透明）-webkit-tap-highlight-color是在进行复杂的 DOM 操作之前对用户触摸做出反应的最快方式。这在较旧、速度较慢的设备上尤其明显。

据我了解，该border-radius规则不适用于点击突出显示。对于圆形按钮之类的元素还有什么方法可以做到这一点吗？

button {
  appearance: none;
  border: none;
  padding: 1em 2em;
  border-radius: 2em;
  -webkit-tap-highlight-color: rgba(0,0,0,0.2);
}
button:active {
  color:red;
}

<button>Enter</button>

Answer 1

只需在按钮周围制作一个包装纸并制作它overflow: hidden，然后在该包装纸上应用圆角

span {
    display: inline-block;
    overflow: hidden;

    border-radius: 2em;
}

button {
    border: none;
    padding: 1em 2em;

    cursor: pointer;
}

<span>
    <button>Test</button>
</span>