受团队信任
在不改变元素大小的情况下，使用CSS大纲在元素边界周围创建一个类似边界的形状，并将其应用到重点交互元素上，使使用键盘导航的个人更容易访问您的网站。
乍一看，轮廓、边界和框阴影非常相似。但是，与边框或框阴影不同，大纲在元素的边界周围绘制类似边界的形状。这意味着轮廓不会在设计中占用额外的空间，不会影响元素的大小，也不会在它出现时引起布局的变化。
当站点访问者使用键盘按tab键到您的交互元素(例如，按钮、链接和输入字段)时，您可以使用大纲来替换浏览器的默认焦点环样式。如果应用正确，交互式元素的大纲可以使你的网站更容易被依赖键盘的网站访问者(例如，视力低下、行动受限或注意力障碍的人)访问。
注意:对于Safari用户，你必须在设置>高级面板中启用“按Tab键高亮网页上的每个项目”，然后才能按Tab键正常工作。
在这节课中，你将学到:
不同的浏览器默认在交互元素上使用不同的大纲，会产生不一致的结果。
为了克服这种不一致性，您可以使用大纲来覆盖和标准化所有浏览器上的大纲行为，从而使键盘集中在交互式元素上的内容对站点访问者来说是可读的、一致的和可访问的。
因为正确地为互动元素设置大纲对可读性、一致性和可访问性至关重要，所以让我们在使用大纲时牢记以下几点:
大纲的目的是帮助你的网站访问者在你的设计中导航，当他们用他们的键盘在你的交互元素中点击时。出现在元素周围的轮廓使访问者清楚地知道他们正在与一个特定的元素进行交互——他们专注于一个特定的元素。如果他们再次按下键盘上的Tab键，大纲将出现在下一个新聚焦的元素周围。
正因为如此，在文章中添加一个大纲是非常必要的集中(键盘)国家或集中元素的状态。
重要的是:不要在没有一个元素的状态。这将覆盖浏览器默认的轮廓样式，当通过选项卡时，交互式元素将不容易被站点访问者看到。了解更多关于州的信息．
两者的主要区别集中而且集中(键盘)状态是:
对于我们的示例，我们将为元素添加大纲集中(键盘)状态。选择集中(键盘)状态:
既然你已经选择了集中(键盘)状态时，可以向元素添加大纲。但让我们先来看看如何使用以下方法定制大纲的外观:
样式决定了围绕元素的轮廓类型。轮廓可以是实线、虚线或虚线。
重要的是:样式为“None”的大纲将删除浏览器默认的焦点样式。如果一个活动元素上没有可见的焦点，这可能会导致依赖键盘导航的人迷路。请始终在大纲上设置实线、虚线或虚线样式，以确保您的网站保持可访问性。
宽度决定了轮廓的厚度。这个值可以使用单元下拉列表中可用的任何CSS单元。
了解更多关于输入值和单位．
重要的是:宽度为“0”的轮廓线将删除浏览器默认的焦点样式。如果一个活动元素上没有可见的焦点，这可能会导致依赖键盘导航的人迷路。请确保您的网站保持可访问性，始终设置宽度大于“0”在你的大纲。(我们建议宽度至少为2像素。)
偏移量决定了轮廓和元素的边或边框之间的空间大小。这个值可以使用单元下拉列表中可用的任何CSS单元。
了解更多关于输入值和单位．
颜色指定轮廓的颜色。
重要的是:用于聚焦状态的轮廓至少需要3:1的对比度。在设计你的轮廓时，记住要考虑到轮廓与它所包围的元素的其余部分的对比，以及元素背后的内容。
大纲是为了突出，以便依赖键盘导航的个人可以很容易地看到重点元素。你可以检查边框的颜色对比，并通过这些优秀的颜色对比工具了解更多的最佳实践:
让我们在你的元素上实践一些大纲样式:
让我们来预览一下这个大纲是如何与你的交互元素一起运行的:
有时，您可能决定不希望在元素上使用自定义大纲，而希望将其重置为使用浏览器默认值。
重要的是:虽然Outline样式可能很容易选择“None”，但请记住，这将不会删除任何已设置的其他属性(例如，宽度、偏移量或颜色)，并且将使您的Outline完全消失，这是不可访问的。
完全删除轮廓的最好方法是完全重置它:
你可以通过以下方法检查你是否重新设置了你的大纲预览交互元素用你的键盘在它们之间切换。默认的浏览器大纲将出现在你的元素周围，如果你的大纲已经正确重置。
让我们来看看在设计中使用大纲时需要考虑的一些最佳实践:
您可能想知道是否可以将大纲应用到规则中集中状态的元素，或者只将其添加到集中(键盘)状态。简单地说，这取决于您的设计偏好。
不管你的设计偏好如何，过程都很简单:
虽然默认的浏览器大纲很有帮助，但在特定的背景颜色下，它们并不总是提供最佳的可视性。
例如，Safari浏览器总是默认为蓝色大纲，这在白色背景下工作得很好，但在蓝色背景下可能会有问题。如果默认的浏览器大纲和背景都是蓝色的，就很难确定按钮是否被聚焦。
虽然你可以在设计中的所有链接上设置默认大纲，但最好还是考虑一下整个网站设计中的不同外观，以及你的大纲如何在每个外观中发挥作用。
假设您选择在按钮周围添加蓝色轮廓。与默认的Safari轮廓类似，蓝色轮廓在浅色背景或深色背景下效果很好，但在蓝色背景下就不可见了。
这就是定制你的大纲的力量所在。通过类或组合类，你可以只调整出现在蓝色部分的按钮的轮廓，确保你有适当的对比度:
很高兴知道:Windows高对比度模式允许用户为所选文本的轮廓设置自己的颜色值。虽然Windows仍然尊重CSS大纲值，但它可以覆盖颜色本身。
虽然你不必对设计中的每个交互元素都使用大纲，但重要的是要记住，它确实会影响那些依赖于它的个人的键盘导航体验。如果有疑问，请确保为交互元素添加大纲。
阅读更多关于可访问性的信息:
