Tailwind CSS - 环形偏移宽度

Tailwind CSS：描边偏移宽度

Tailwind 的 描边偏移宽度 工具类（ring-offset-{width}）用于设置元素与其焦点描边之间模拟“间隙”的厚度。这主要用于确保焦点描边清晰可见，并且不与元素的边框重叠。

现代可访问性方法

创建高可见度的焦点指示器是 Web 可访问性的基石。传统上，这是通过 outline 实现的。然而，outline 可能会造成视觉上的不协调，并直接绘制在元素边框的顶部。Tailwind 的 ring 工具类结合 ring-offset，提供了一个更强大、更美观的解决方案。它们使用 box-shadow 在元素边框的外部绘制一个描边，并且偏移创建了一个清晰的分离。

描边偏移宽度类

这些类控制偏移的宽度。描边颜色和偏移颜色可以单独控制。

Class	CSS Properties (Simplified)
`ring-offset-0`	`--tw-ring-offset-width: 0px;`
`ring-offset-1`	`--tw-ring-offset-width: 1px;`
`ring-offset-2`	`--tw-ring-offset-width: 2px;`
`ring-offset-4`	`--tw-ring-offset-width: 4px;`
`ring-offset-8`	`--tw-ring-offset-width: 8px;`

实际应用：可访问的按钮

此示例演示了如何创建可访问且视觉吸引人的按钮。当按钮获得焦点时（通过点击或 Tab 键导航到它），会显示一个描边。ring-offset-2 工具类确保按钮与描边之间有 2px 的间隙，使其突出。ring-offset-color 由 ring-offset-white 控制，确保间隙在深色背景下可见。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accessible Ring Offset</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-800 p-8 flex justify-center items-center min-h-screen">
    <div class="space-x-4">
        <button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md
                       transition-transform transform hover:-translate-y-1
                       focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-800">
            Primary Button
        </button>
        <button class="px-6 py-3 bg-green-600 text-white font-semibold rounded-lg shadow-md
                       transition-transform transform hover:-translate-y-1
                       focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-gray-800">
            Success Button
        </button>
    </div>
</body>
</html>

使用内嵌描边

你也可以使用 ring-inset 工具类将描边放置在元素边框的内部。ring-offset 仍会创建间隙，但这次它将在内部。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inset Ring Offset</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-6 text-center">Inset Ring with Offset</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="bg-gray-200 p-6 rounded-lg border-2 border-gray-400 ring-4 ring-purple-500 ring-offset-4 ring-offset-gray-200 ring-inset">
            <p class="font-bold text-center">`ring-offset-4` inside</p>
        </div>
        <div class="bg-gray-200 p-6 rounded-lg border-2 border-gray-400 ring-4 ring-teal-500 ring-offset-8 ring-offset-gray-200 ring-inset">
            <p class="font-bold text-center">`ring-offset-8` inside</p>
        </div>
        <div class="bg-gray-200 p-6 rounded-lg border-2 border-gray-400 focus-within:ring-4 focus-within:ring-red-500 focus-within:ring-offset-4 focus-within:ring-inset">
             <input type="text" class="w-full bg-transparent outline-none text-center" placeholder="Focus me!">
        </div>
    </div>
</body>
</html>

最佳实践

优先考虑焦点状态：描边的主要用途是 focus: 和 focus-visible:。始终从那里开始。
禁用默认轮廓：当使用描边作为焦点指示器时，添加 focus:outline-none 以防止浏览器绘制两个焦点指示器。
设置偏移颜色：始终定义一个 ring-offset-{color}（例如，ring-offset-white 或 ring-offset-gray-800），使其与页面背景形成对比，以确保偏移间隙可见。
一致性：为你的整个网站的交互式元素使用一致的描边和偏移宽度，以获得可预测的用户体验。