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.

您必須通過在焦點上將焦點樣式的盒子陰影添加到元素的盒子陰影中來對此進行反擊。