css 水平虚线 虚线延长_如何编辑CSS虚线轮廓

默认情况下，当锚标记元素处于active或focus状态时，在其周围会出现一条虚线，如下图所示。

对于仅通过键盘（特别是使用Tab键）访问网站的用户，此轮廓可用作视觉辅助。 它向用户显示了他们当前关注的焦点。但是，在某些情况下，此轮廓变得丑陋，令人讨厌且令人讨厌，使某些设计人员更喜欢使用以下CSS规则将其移出视线 。

a:hover, a:active, a:focus {
	outline: 0;
}

保持轮廓

建议我们不要删除大纲。 取而代之的是，我们可以尝试对大纲演示文稿进行样式设计，以使其适合并与我们的网站设计很好地配合使用。 通过删除此轮廓，我们将防止没有鼠标的用户或屏幕阅读器的可访问性。

造型轮廓

此轮廓在CSS中通过outline属性指定。 我们可以指定轮廓样式，宽度和颜色。 给定上图中的示例，我们可以对轮廓进行样式设置，如下所示。

a:active, 
a:focus {
	outline: 2px solid #e9841d;
}

这将导致：

现在，看起来不是默认轮廓样式更好吗？

取代大纲

或者，我们可以删除大纲，并用其他CSS属性替换它。 例如，我们可以像这样用backgrond-color替换轮廓。

a:active, 
a:focus {
	outline: 0;
	backgrond-color: #e9841d;
}

现在，当菜单处于focus状态时，背景菜单将以独特的背景色而不是轮廓突出显示。

我们可以用来替换的其他CSS属性是color ， border和text-decoration 。

• 观看演示
• 下载源

最终思想

有许多残疾人，并且对网络的访问受到限制。 因此，使我们的网站更易于访问对于他们确实很有帮助，包括为处于focus状态的元素提供交互式演示，而不是删除轮廓。

有关此主题的更多信息，您可以转到以下参考。

• W3C可访问性 – W3.org
• 什么是辅助功能？ – Adob​​e.com
• 删除虚线轮廓 -CSS技巧

翻译自: https://www.hongkiat.com/blog/css-dotted-outline/