手動(dòng)創(chuàng)建線程池 效果會(huì)更好

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

大多數(shù)瀏覽器對于：focus psuedo-class具有其默認(rèn)的輪廓樣式。

Chrome’s default outline styleChrome瀏覽器的默認(rèn)輪廓樣式

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

本大綱的風(fēng)格是可訪問性是至關(guān)重要的，尤其是當(dāng)它涉及到鍵盤導(dǎo)航，所以刪除它不被認(rèn)為是一件好事 。

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:

我不是默認(rèn)瀏覽器輪廓的忠實(shí)擁護(hù)者。 以Chrome為例。 我認(rèn)為顏色太淺，邊框太細(xì)。 當(dāng)然，您可以隨時(shí)更改顏色和厚度。 像這樣：

Overridden outline style覆蓋輪廓樣式

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屬性的“問題”在于它沒有遵循圓角。 就個(gè)人而言，如果不是這種情況，我會(huì)更喜歡，所以我傾向于采用其他解決方案。

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

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

您可以使用box-shadow獲得相同的結(jié)果。 這是如何做：

The box-shadow creates a outline-like style盒子陰影營造出輪廓般的風(fēng)格

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

現(xiàn)在，它將應(yīng)用于每個(gè)元素的默認(rèn)焦點(diǎn)樣式。 像這種形式的輸入：

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.

但是，這些輸入都帶有邊框，當(dāng)您同時(shí)具有邊框和陰影效果時(shí)，我認(rèn)為它看起來并不好 。

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

您可以通過刪除焦點(diǎn)上的邊框顏色來解決此問題：

Simply remove the border-color只需刪除邊框顏色

外賣 (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是解決輪廓屬性缺點(diǎn)的好方法。 請記住，在元素本身具有box-shadow屬性的元素可能會(huì)產(chǎn)生一些“棘手的”結(jié)果：

EwwEWW

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

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

Better更好

翻譯自: https://uxdesign.cc/create-better-accessible-focus-effects-75a3de27b8ba

手動(dòng)創(chuàng)建線程池 效果會(huì)更好

總結(jié)

以上是生活随笔為你收集整理的手动创建线程池 效果会更好_创建更好的，可访问的焦点效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。