这似乎是标准中定义的默认行为，以便在呈现模态子树时聚焦模态子树，来自HTML live标准：
1.为受试者运行对话框聚焦步骤。
如果你想保持这样，并防止按钮焦点只是触发按钮上的blur()事件，我试图使用inert和autofocus属性，但它们似乎不起作用，所以我认为你必须坚持使用.blur()实现：

const dialog = document.querySelector("#dialog");
document.querySelector("#open-btn").addEventListener('click', () => {
  dialog.showModal();
  document.getElementById('close-btn').blur();
});

document.querySelector("#close-btn").addEventListener('click', () => {
  dialog.close();
});

#close-btn:focus {
  background: red;
}

<button id="open-btn">Open</button>
<dialog id="dialog">
  <button id="close-btn" inert="false" autofocus="false">&times;</button>
</dialog>

上面的快照是在打开对话框后从close-btn的style部分捕获的（浏览器的developer tools/只需按F12键即可打开）。
浏览器的Webkit在打开对话框时显式添加outline属性。
outline属性在使用TAB键（或等效键）导航Web文档时为具有“焦点”的链接提供视觉反馈。这对于那些不能使用鼠标或有视力障碍的人特别有用。如果您删除了大纲，您将使这些人无法访问您的网站。
但是如果你仍然想删除它，那么使用下面的代码。

#close-btn {
  background: red;
  outline: none;
}

希望这对你有帮助

您可以简单地在某个任意元素上执行focus()，然后执行immeridate blur()。
例如：

const dialog = document.querySelector("#dialog");
document.querySelector("#open-btn").addEventListener('click', () => {
  dialog.showModal();
  dialog.focus();
  dialog.blur();
});

在上面的例子中，我选择聚焦和模糊对话框元素本身-这足以抵消默认的自动聚焦行为。适用于基于Chromium的浏览器。