Tailwind CSS - 环形宽度

Tailwind CSS - 描边宽度

描边工具类使用 box-shadow CSS 属性在元素周围创建实心描边。它们是 outline 的一个极佳的现代替代方案，可用于创建高可见度的焦点指示器和其他装饰效果，且不影响元素的布局。

描边与边框：有什么区别？

理解其区别是有效使用描边的关键：

• 布局影响：border 是 CSS 盒模型的一部分并占用空间，可能会移动其他元素。ring 绘制在边框外部，并且不影响布局。
• 定位：border 始终紧邻元素。ring 可以使用 ring-offset-* 工具类在元素和描边本身之间设置一个偏移（间隙）。
• 样式：border 可以样式化（例如 dashed、dotted 等）。ring 始终是实心的。

核心描边宽度工具类

Class	Effect
ring-0	移除任何描边（设置 0px box-shadow）。
ring-1	应用 1px 宽的描边。
ring-2	应用 2px 宽的描边。
ring	应用 3px 宽的描边（这是默认值）。
ring-4	应用 4px 宽的描边。
ring-8	应用 8px 宽的描边。
ring-inset	将描边绘制在元素边框的内部，而非外部。

首要用例：可访问的焦点状态

创建可见的焦点指示器对于键盘可访问性 (a11y) 至关重要。描边非常适合这一点，因为它们可以叠加在其他样式之上而不破坏布局。focus-visible 变体是仅向键盘用户显示焦点描边的现代标准。

示例 1：一个真正可访问的按钮

此按钮使用 focus-visible 来显示一个 2px 宽的蓝色描边，并带有 2px 的偏移，当用户通过 Tab 键导航到它时。偏移确保了即使按钮紧贴另一个元素，描边也可见。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible Focus Ring</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen p-4 space-x-4">

  <button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700
                 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-slate-100">
    Click or Tab to Me
  </button>

  <input type="text" placeholder="Tab to me too" class="px-4 py-3 border border-gray-300 rounded-lg
                  focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-green-500">

</body>
</html>

焦点类解析：

• focus:outline-none：我们首先移除浏览器默认的、通常不一致的轮廓。
• focus-visible:ring-2：我们添加一个 2px 的描边，但仅适用于“真实的”焦点事件（如键盘 Tab 键导航），而不是鼠标点击。
• focus-visible:ring-indigo-500：我们使用 ring-color 工具类为描边着色。
• focus-visible:ring-offset-2：我们在元素和描边之间添加一个 2px 的偏移。
• focus-visible:ring-offset-slate-100：我们甚至可以为偏移空间着色以匹配背景，确保外观整洁。

装饰性用途和悬停状态

描边也可以用于视觉效果，例如在悬停时使元素“突出”显示。

示例 2：交互式个人资料图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Decorative Ring Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200 flex items-center justify-center min-h-screen">

  <!-- transition-all 类使描边平滑出现 -->
  <div class="relative p-1 rounded-full hover:ring-4 hover:ring-pink-400 hover:ring-offset-4 hover:ring-offset-gray-200 transition-all duration-300">
    <img class="w-32 h-32 rounded-full" src="https://via.placeholder.com/128" alt="Profile picture">
  </div>

</body>
</html>

专业技巧

• 结合所有功能：记住结合 ring-width、ring-color、ring-offset-width 和 ring-offset-color 工具类以实现完全控制。
• 任意值：需要特定的描边宽度？使用方括号：ring-[5px]。
• 内嵌效果：ring-inset 工具类可用于创建内部边框效果，而不会增加元素的尺寸，这对于表单输入框的活动状态等很有用。