在CSS中添加这个:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

我在上面的评论中提到了这一点，但为了清晰起见，有必要把它作为一个单独的答案列出。只要你不需要在按钮上设置焦点，你可以在它应用任何CSS效果之前使用焦点事件删除它:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

这避免了在使用click事件时可以看到的闪烁。这确实限制了界面，并且您将无法选择按钮，但这在所有应用程序中都不是问题。

如果您正在使用webkit浏览器(可能是与webkit供应商前缀兼容的浏览器)，则该轮廓属于按钮的-webkit-focus-ring伪类。简单地设置它的轮廓为none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome就是这样一个webkit浏览器，这种效果也会发生在Linux上(不仅仅是macOS的事情，尽管一些Chrome风格只适用于macOS)

如果你想在鼠标下而不是键盘标签上完成轮廓的删除，并且你正在使用VueJS，下面是解决方案:

<button @mousedown="$event.preventDefault()">No Online On Click</button>

这基本上阻止它在点击时接收焦点，但任何其他接收焦点的方式都保持活跃。

与TS溶液反应

  const btnRef = useRef<HTMLButtonElement | null>(null);
  const handleOnMouseUp = () => {
    btnRef.current?.blur();
  };
  
  <button
    ref={btnRef}
    onClick={handleOnClick}
    onMouseUp={handleOnMouseUp}
  >
    <span className="icon-plus"></span> Add Page
  </button>

我有同样的问题使用<a>作为按钮，我发现我错过了一个工作区添加attr类型=“按钮”使它的行为正常为我至少。

<a type=“巴顿”类=“bmr btn-primary”>释放我!< / a >