为了避免在更改焦点上的outline属性时所造成的问题，就是在用户按Tab键输入或点击它时给人一种视觉效果。

在这个例子中是一个提交类型，但是你也可以应用到type="button"。

输入(type =提交):{焦点 大纲:不重要; Background-color: rgb(208,192,74); ｝

在使用键盘时，另一种恢复轮廓的方法是使用:focus-visible。但是，这在IE:https://caniuse.com/?search=focus-visible上不起作用。

给定下面的html:

<button class="btn-without-border"> Submit </button>

在css样式中执行以下操作:

.btn-without-border:focus {
    border: none;
    outline: none;
}

此代码将删除按钮边框，并在单击按钮时禁用按钮边框焦点。

由于Chrome和Mozilla不仅在按钮周围添加了这一行，而且在链接文本周围也添加了这一行，我在我的网站上使用这个:

a:focus {outline: none;
}

适用于浏览器、链接和按钮。

顺便说一句，这并没有(27.4.2021):

input[type=button]{
   outline:none;
}
input[type=button]::-moz-focus-inner {
   border: 0;
}

button:focus{outline:none !important;}

如果在Bootstrap中使用，则重要

Chrome和FF中的焦点轮廓:

删除按钮焦点轮廓:

button,
input[type=button] {
  outline: none;
}
button::-moz-focus-inner,
input[type=button]::-moz-focus-inner {
  border: 0;
}

/*
  Accessibility (A11Y)
  Don't forget! User accessibility is important
*/
button:focus,
input[type=button]:focus {
  /* your custom focused styles here */
}