CSS 去除浏览器默认轮廓外框

背景

在某些浏览器中，当用户聚焦到页面元素上时（例如链接、按钮等），会显示一个默认的蓝色或灰色边框，这被称为「轮廓外框」。然而，大部分网站的设计并不需要这个边框，甚至会影响到页面的美观度。如何去除这个默认的轮廓外框，就成了一个需要解决的问题。

解决方案

1. 使用 CSS 的 outline 属性将轮廓外框设为 0

可以通过下面的代码去除链接的轮廓外框：

a:focus {
  outline: none;
}

同样地，可以将其他页面元素的轮廓外框去掉：

:focus {
  outline: none;
}

这种方法在去除轮廓外框时非常简单且有效，不会对页面的性能造成影响。但这种方法还存在一些潜在的问题：

• 用户使用键盘导航时，轮廓外框可以帮助用户知道当前聚焦到的元素是哪个，去掉轮廓外框可能会影响可访问性；
• 如果用户使用鼠标在页面上点击后拖拽，那么在当前元素被选中时，会显示一个虚线矩形，这个虚线矩形可能会被错误地认作是轮廓外框，需要小心处理。

2. 自定义轮廓外框

通过对 outline 属性进行自定义，能够实现一些新的功能。下面的例子中，将轮廓外框改为 4px 的红色实线：

:focus {
  outline: 4px solid red;
}

可以使用各种样式和颜色实现自定义的轮廓外框，以适应不同的设计风格和品牌要求。

3. 主动处理较复杂的 UI 界面

对于某些较复杂的 UI 界面，如 Web 表单及导航栏等，需要对其做一些特殊处理：

1. 为链接指定样式

   ```css
   a:focus {
   outline: none;
   border-bottom: 2px solid blue;
   }

   a:hover,
   a:active {
   outline: none;
   border-bottom: none;
   }
   ```

   该方法可以在聚焦到链接时去除默认的轮廓外框，并为链接增加一个下划线来表示链接被聚焦。

2. 使使用键盘导航的用户能够继续使用这些 UI 界面

   css
[tabindex="1"]:focus ~ .dropdown {
/* ... */
}

   该方法为未聚焦元素增加合适的 tabindex 值，以保证使用键盘导航的用户可以顺畅地使用这些 UI 界面。

结论

去除默认的轮廓外框是为了增强页面的美观度，但是在处理过程中需要考虑到可访问性和用户体验。通过以上的方法，可以有效地去除默认的轮廓外框，并适应不同的设计风格和品牌要求。