32. 轮廓与偏移

本节目标：理解 outline 和 border 的区别，学会用 outline 做焦点提示，用 ring 做不占用空间的视觉强调。

outline 和 border 长得像，但”性格”完全不同。搞清楚它们的差异，才不会用错地方。

outline vs border

属性	border	outline
占用空间	是	否
影响布局	是	否
可以设置圆角	是	跟随元素形状
典型用途	卡片边框、按钮边框	焦点提示、选中状态

Note

outline 不占用空间——它画在元素「外面」，不会影响周围元素的布局。这就是为什么它适合做焦点提示：出现 outline 时页面不会跳动。

outline 宽度

类名	效果
`outline-0`	无轮廓
`outline-1`	1px
`outline-2`	2px
`outline-4`	4px
`outline-8`	8px

outline 样式

类名	效果
`outline`	默认轮廓（浏览器样式）
`outline-none`	移除轮廓
`outline-solid`	实线
`outline-dashed`	虚线
`outline-dotted`	点线
`outline-double`	双线

outline 颜色

@theme {
  --color-outline-blue: #3b82f6;
}

<div class="outline-2 outline-blue-500">蓝色轮廓</div>

也可以用任意值：outline-[#ff0000]。

outline-offset：轮廓偏移

控制轮廓离元素边缘的距离：

类名	效果
`outline-offset-0`	无偏移
`outline-offset-1`	1px
`outline-offset-2`	2px
`outline-offset-4`	4px
`outline-offset-8`	8px

<div class="outline-2 outline-blue-500 outline-offset-4 p-4">
  轮廓离元素 4px
</div>

Tip

outline-offset 配合 outline 可以做出「双重边框」效果——元素本身有 border，外面还有一圈有间距的 outline。

ring：环形边框

ring 不是 CSS 原生属性，是 Tailwind 用 box-shadow 模拟的环形效果。它的特点跟 outline 一样：不占用空间。

ring 宽度

类名	效果
`ring-0`	无环
`ring-1`	1px 环
`ring-2`	2px 环
`ring-4`	4px 环（常用）
`ring-8`	8px 环
`ring`	3px 环（默认）

ring 颜色

<div class="ring-2 ring-blue-500">蓝色环</div>
<div class="ring-4 ring-purple-300">紫色环</div>

ring 偏移

<div class="ring-2 ring-blue-500 ring-offset-2">有偏移的环</div>

ring-offset 跟 outline-offset 类似，控制环离元素的距离。还可以设置偏移颜色：

<div class="ring-2 ring-blue-500 ring-offset-2 ring-offset-gray-100">
  白色偏移 + 蓝色环
</div>

Tip

ring 是表单元素焦点状态的首选方式。focus:ring-2 focus:ring-blue-500 是 Tailwind 项目的标配写法。

inset ring：内阴影环

ring-inset 让环画在元素内部（类似 box-shadow: inset）：

<div class="ring-2 ring-inset ring-gray-300">内环效果</div>

实际应用：焦点状态

<!-- 输入框焦点状态 -->
<input 
  type="text" 
  class="w-full border border-gray-300 rounded-lg px-4 py-2
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
  placeholder="请输入..."
>

<!-- 按钮焦点状态 -->
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  焦点时出现蓝色环
</button>

实际应用：选中卡片

<label class="cursor-pointer">
  <input type="radio" name="plan" class="peer sr-only">
  <div class="p-4 border border-gray-200 rounded-lg 
              peer-checked:border-blue-500 peer-checked:ring-2 peer-checked:ring-blue-500">
    <h3 class="font-semibold">方案 A</h3>
    <p class="text-gray-600">描述文字...</p>
  </div>
</label>

选中时通过 peer-checked: 变体加上 ring 和 border，实现”选中高亮”效果。

实际应用：轮廓偏移效果

<div class="relative inline-block">
  <img 
    src="photo.jpg" 
    class="w-32 h-32 object-cover"
  />
  <div class="absolute inset-0 outline-2 outline-white outline-offset-4"></div>
</div>

图片内部有一圈白色轮廓偏移，形成「内边框」效果。

焦点可访问性

使用 focus-visible 只在键盘导航时显示焦点样式，鼠标点击时不显示：

<button class="focus-visible:ring-2 focus-visible:ring-blue-500">
  键盘焦点时出现环
</button>

Warning

永远不要完全移除焦点轮廓（outline-none 而不提供替代方案）。这对键盘用户是灾难——他们无法知道当前焦点在哪里。至少要提供 focus:ring-* 或 focus-visible:ring-* 作为替代。

本节小结

outline-* → 轮廓（CSS 原生，不占空间）
outline-offset-* → 轮廓偏移
ring-* → 环形（box-shadow 模拟，不占空间）
ring-offset-* → 环形偏移
focus:ring-* → 焦点状态首选
focus-visible:ring-* → 只对键盘焦点生效
outline 不占空间，适合焦点提示
ring 比 outline 更灵活（可偏移、可 inset）