朝向凉爽的焦点手套

>本文探讨了经常被忽视的焦点镜头（点缀着指示元素的焦点），并如​​何使用CSS增强其外观和可访问性。 尽管一些开发人员试图隐藏它，但本文提倡提高其可见性。

焦点镜头，对于键盘导航至关重要，通常是一个简单的点概述：

但是，我们可以通过

<code>a:focus {
    outline: 1px dotted;
}</code>

>和

>：显着提高其外观和可用性 outline-offset -moz-outline-radius

>在元素及其轮廓之间添加空间，而

<code>a:focus {
    outline: 1px dotted;
    outline-offset: 2px;
    -moz-outline-radius: 5px;
}</code>

（firefox特定）创建圆角。 本文展示了各种样式方法：

outline-offset -moz-outline-radius

默认值：

5px半径，2px偏移。
• 小文本： 1px偏移。
• 带有边界的 元素： 0px偏移以使其紧密贴合。
此示例还显示了角落的选择性舍入以匹配现有元素样式。
• >虽然不完全跨浏览器兼容（即支持有限），但这种方法代表了渐进式增强，使默认的轮廓完好无损，因为浏览器缺乏支持。文章得出结论，可访问性功能在视觉上不必乏味。周到的设计可以使它们具有功能性和美观性。>

缩略图信用：ihtatho

经常询问的问题（常见问题解答）有关焦点

>

本节回答了有关聚焦手机的常见问题，涵盖了它们的重要性，与鼠标光标的差异，使用CSS的自定义选项（包括属性和Mozilla特定）以及可见性问题。 它还澄清说，尽管在技术上进行，但由于对可访问性的负面影响，强烈灰心地禁用了焦点。

以上是朝向凉爽的焦点手套的详细内容。更多信息请关注PHP中文网其他相关文章！