我太懂这种被顽固的焦点边框烦到的滋味了！尤其是和模态框结合的时候，关闭弹窗后按钮还留着那个蓝色框，确实闹心。结合你的情况，给你两个关键解决方案：

1. 用CSS强制覆盖焦点/激活状态的样式 #

Bootstrap的按钮默认会用box-shadow来实现焦点时的蓝色边框（而不是单纯的outline），所以你需要同时覆盖这两个属性，还要考虑现代浏览器的:focus-visible状态：

#openPopup:focus,
#openPopup:active,
#openPopup:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

如果不想用!important，可以提升选择器优先级（比如加上Bootstrap按钮的默认.btn类）：

.btn#openPopup:focus,
.btn#openPopup:active,
.btn#openPopup:focus-visible {
  outline: none;
  box-shadow: none;
}

2. 模态框关闭时手动移除按钮焦点 #

关闭模态框后按钮还保留焦点，是因为弹窗关闭后焦点自动回到了触发按钮上。你可以监听模态框的hidden.bs.modal事件，手动让按钮失去焦点：

// 替换成你的模态框实际ID
const modalElement = document.getElementById('你的模态框ID');
const openButton = document.getElementById('openPopup');

modalElement.addEventListener('hidden.bs.modal', function() {
  openButton.blur(); // 移除按钮的焦点状态
});

把这两个方法结合起来，就能彻底解决那个烦人的蓝色边框问题啦！

内容的提问来源于stack exchange，提问作者madsongr