CSS `outline` 属性的 `offset` / `radius` (提案) 用于更美观的焦点指示

各位观众老爷们，晚上好！今天咱们来聊聊CSS里一个挺有意思，而且未来可能会大放异彩的属性：outline 的 offset 和 radius。

什么是 outline？

首先，得明确一下，outline 这玩意儿不是 border。虽然它们长得有点像，都是围绕元素画一圈线，但区别可大了去了。

• border：是盒子模型的一部分，会影响元素的大小和布局。
• outline：不属于盒子模型，不会影响元素的大小和布局。它就像一个幽灵，在元素周围飘来飘去，不占任何物理空间。

outline 主要用于提供视觉指示，最常见的场景就是键盘 Tab 键切换焦点时，给元素加一个醒目的边框，提醒用户当前焦点在哪儿。

outline 的基本用法

先来回顾一下 outline 的基本用法，免得大家忘了：

.element {
  outline-width: 2px;
  outline-style: solid;
  outline-color: blue;
}

/* 简写形式 */
.element {
  outline: 2px solid blue;
}

这几行代码会在 .element 元素周围画一条2像素宽、实线、蓝色的轮廓线。很简单吧？

outline-offset：让轮廓线离元素更远一点

重点来了，咱们今天的主角之一：outline-offset。这个属性允许你控制轮廓线与元素边缘之间的距离。默认情况下，outline 是紧贴着元素边缘的，有时候看起来会显得很拥挤。outline-offset 可以让轮廓线稍微往外“退”一步，增加视觉空间。

.button {
  outline: 2px solid orange;
  outline-offset: 5px;
}

这段代码会让按钮的橙色轮廓线距离按钮边缘有5像素的间距。

属性	描述	取值	默认值
outline	轮廓线的所有属性的简写	<outline-width> <outline-style> <outline-color>	无
outline-width	轮廓线的宽度	thin | medium | thick | <length>	medium
outline-style	轮廓线的样式	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset	none
outline-color	轮廓线的颜色	<color> | invert	invert
outline-offset	轮廓线与元素边缘的距离	<length>	0

outline-radius (提案)：让轮廓线更圆润

接下来，更激动人心的部分来了：outline-radius。这个属性目前还只是一个提案，还没有被所有浏览器完全支持（但Chrome已经支持）。它的作用是给轮廓线添加圆角，让焦点指示看起来更加柔和、现代。

如果没有 outline-radius，轮廓线总是直角的，这在很多情况下显得有点生硬。有了 outline-radius，我们可以让轮廓线和元素的圆角保持一致，或者创造出一些有趣的视觉效果。

.card {
  border-radius: 10px; /* 卡片本身的圆角 */
  outline: 2px solid purple;
  outline-offset: 3px;
  outline-radius: 12px; /* 轮廓线的圆角，略大于卡片本身的圆角 */
}

这段代码会让卡片的轮廓线也拥有圆角，并且圆角半径略大于卡片本身的圆角，营造出一种“光晕”的效果。

outline-radius 的用法详解

outline-radius 的用法和 border-radius 非常相似，可以接受一个值、两个值、三个值或者四个值，分别代表不同角的圆角半径。

• 一个值： 所有角都应用相同的圆角半径。

  .element {
    outline-radius: 5px; /* 所有角都是 5px 的圆角 */
  }

• 两个值： 第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。

  .element {
    outline-radius: 5px 10px; /* 左上角和右下角 5px，右上角和左下角 10px */
  }

• 三个值： 第一个值应用于左上角，第二个值应用于右上角和左下角，第三个值应用于右下角。

  .element {
    outline-radius: 5px 10px 15px; /* 左上角 5px，右上角和左下角 10px，右下角 15px */
  }

• 四个值： 依次应用于左上角、右上角、右下角、左下角。

  .element {
    outline-radius: 5px 10px 15px 20px; /* 左上角 5px，右上角 10px，右下角 15px，左下角 20px */
  }

除了使用像素值，还可以使用百分比值。百分比值是相对于元素自身的高度和宽度来计算的。

.element {
  width: 200px;
  height: 100px;
  outline-radius: 10%; /* 水平方向 20px，垂直方向 10px */
}

outline-radius 的高级用法：创造更复杂的形状

outline-radius 还可以和 border-radius 一起使用，创造出一些非常复杂的形状。例如，可以创建一个“叶子”形状：

<div class="leaf"></div>

.leaf {
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%; /* 创建一个圆形 */
  outline: 3px solid darkgreen;
  outline-offset: 5px;
  outline-radius: 0 50% 50% 0; /* 创建叶子的形状 */
}

这个例子先用 border-radius 创建一个圆形，然后用 outline-radius 将轮廓线的左上角和右下角设置为0，右上角和左下角设置为50%，就形成了一个叶子的形状。

outline 在焦点指示中的应用

outline 最重要的用途之一就是提供焦点指示。当用户使用键盘 Tab 键在页面元素之间切换时，outline 可以清晰地显示当前焦点在哪儿，帮助用户进行导航。

/* 移除默认的焦点样式 */
:focus {
  outline: none;
}

/* 自定义焦点样式 */
.button:focus {
  outline: 2px solid dodgerblue;
  outline-offset: 3px;
  outline-radius: 5px;
}

input:focus {
    outline: 2px solid red;
    outline-offset: 2px;
}

这段代码首先移除了浏览器默认的焦点样式（通常是一个丑陋的蓝色边框），然后为按钮和输入框定义了自定义的焦点样式。按钮的焦点样式使用了 outline-offset 和 outline-radius，让焦点指示看起来更加美观。

无障碍性 (Accessibility) 考虑

在使用 outline 提供焦点指示时，一定要考虑到无障碍性。确保焦点指示足够醒目，能够被所有用户清晰地看到，包括视力障碍用户。

• 对比度： 确保轮廓线颜色与背景颜色之间有足够的对比度。可以使用在线的对比度检查工具来验证对比度是否符合 WCAG 标准。
• 宽度： 轮廓线宽度不宜过小，至少要 2 像素以上，才能保证清晰可见。
• 样式： 避免使用 outline: none 完全移除焦点指示。如果一定要移除默认样式，必须提供自定义的焦点样式，确保用户能够清楚地知道当前焦点在哪儿。

outline 的兼容性

outline 的基本属性（outline-width、outline-style、outline-color、outline-offset）兼容性非常好，几乎所有现代浏览器都支持。

但是，outline-radius 目前还只是一个提案，兼容性还不是很好。截至目前，Chrome和Edge已经支持。可以使用 Can I Use 网站查询最新的兼容性信息。

属性	Chrome	Firefox	Safari	Edge	Opera
outline	1+	1.5+	3+	12+	9+
outline-width	1+	1.5+	3+	12+	9+
outline-style	1+	1.5+	3+	12+	9+
outline-color	1+	1.5+	3+	12+	9+
outline-offset	8+	1.5+	5+	12+	9.5+
outline-radius	支持	不支持	不支持	支持	支持

总结

outline 是一个非常有用的 CSS 属性，可以用来提供视觉指示，特别是焦点指示。outline-offset 可以调整轮廓线与元素边缘之间的距离，outline-radius (提案) 可以给轮廓线添加圆角，让焦点指示看起来更加美观。

在使用 outline 时，一定要考虑到无障碍性，确保焦点指示足够醒目，能够被所有用户清晰地看到。

虽然 outline-radius 目前兼容性还不是很好，但相信随着时间的推移，越来越多的浏览器会支持这个属性，让我们可以创造出更加精美的焦点指示效果。

一些额外的思考

• outline 可以和 CSS 动画、过渡效果一起使用，创造出更加动态的焦点指示效果。
• 可以结合 JavaScript，根据用户的交互方式（鼠标点击、键盘 Tab 键）动态地改变 outline 的样式。
• 可以为不同的元素定义不同的 outline 样式，让焦点指示更加个性化。

好了，今天的讲座就到这里。希望大家对 outline 的 offset 和 radius 有了更深入的了解。 记住，写代码要优雅，让用户体验更佳！下次再见！