Most browsers has their own default, outline style for the :focus psuedo-class.

大多数浏览器对于：focus psuedo-class具有其默认的轮廓样式。

This outline style is crucial for accessibility, especially when it comes to keyboard navigation, so removing it isn’t considered a good thing.

本大纲的风格是可访问性是至关重要的，尤其是当它涉及到键盘导航，所以删除它不被认为是一件好事 。

However, it is OK to do so if you replace the styling with something else.

但是 ，如果将样式替换为其他样式 ，则可以这样做。

I’m not a huge fan of the default browser outline. Take chrome’s for example. I think the color is too light and the border too thin. Sure, you can always change the color and thickness. Like this:

我不是默认浏览器轮廓的忠实拥护者。 以Chrome为例。 我认为颜色太浅，边框太细。 当然，您可以随时更改颜色和厚度。 像这样：

This approach is fine, but a “problem” with outline property is that it doesn’t follow the rounded corners. Personally I would prefer if this wasn’t the case so I tend to go with a different solution.

这种方法很好，但是具有outline属性的“问题”在于它没有遵循圆角。 就个人而言，如果不是这种情况，我会更喜欢，所以我倾向于采用其他解决方案。

改用盒子阴影 (Use box-shadow instead)

You can achieve the same result using box-shadow. Here’s how:

您可以使用box-shadow获得相同的结果。 这是如何做：

This will now be applied to every element’s default focus style. Like for the inputs in this form:

现在，它将应用于每个元素的默认焦点样式。 像这种形式的输入：

However, these inputs have a border and I don’t think it looks that good when you have both the borders and the box-shadow-effect.

但是，这些输入都带有边框，当您同时具有边框和阴影效果时，我认为它看起来并不好 。

You can get around that by removing the border-color upon focus:

您可以通过删除焦点上的边框颜色来解决此问题：

外卖 (Take aways)

Box-shadow is a nice way to get around the disadvantages of the outline-property. Keep in mind that elements that have a box-shadow property on the element itself could create some “icky” results:

Box-shadow是解决轮廓属性缺点的好方法。 请记住，在元素本身具有box-shadow属性的元素可能会产生一些“棘手的”结果：

You’ll have to counter this by adding the focus-styled box-shadow to the element’s box-shadow upon focus.

您必须通过在焦点上将焦点样式的盒子阴影添加到元素的盒子阴影中来对此进行反击。