焦点

我们应当考虑网站的可访问性，而焦点状态则是可访问性的一部分。

如何获得焦点

一些元素是可聚焦的（ focusable ），比如 <a>、<button>、<input>、<select> 等。可以用 tab 键来切换焦点，用 shift + tab 来切换到上一个焦点。

也可以用元素的 tabindex 全局属性来处理焦点切换。

tabindex 有这些值：

0
默认值，该类元素会被加入全局 tab 索引，全局索引会依据元素在文档中的顺序切换焦点。
负数（通常用 -1 ）
元素将只能通过两种方式来进行聚焦：
- 使用 JavaScipt 事件。
- 若元素的 id 与 URL 中的 # 后名称一致，则会在网页显示时直接获得焦点。
正数（最大值不应超过 32767 ）
该类元素不会加入全局 tab 索引，且会根据在文档中的 tabindex 值（仅包括正数）大小顺序（由小到大）来切换焦点。

可以用 :focus :focus-within :focus-visible 伪类来设置元素样式。

可以用 outline 属性给元素加边框来着重标记。同时可以用 outline-offset 属性设置与内容之间的间距：

a:focus {
  outline: 2px solid slateblue;
  outline-offset: 6px;
}

outline 属性不会使用 border-radius ，如果你想达到效果，可以使用 box-shadow 。