Tailwind CSS - 环绕偏移宽度

Tailwind CSS **环绕偏移宽度** 提供预定义类来控制元素边框与其环绕之间的空间。这允许您调整环绕距元素边缘的偏移距离。

Tailwind CSS 环绕偏移宽度类

以下是 Tailwind CSS 环绕偏移宽度类和属性的列表，它们设置环绕与元素之间不同的间距。

类	CSS 属性
ring-offset-0	--tw-ring-offset-width: 0px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-1	--tw-ring-offset-width: 1px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-2	--tw-ring-offset-width: 2px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-4	--tw-ring-offset-width: 4px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-8	--tw-ring-offset-width: 8px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);

Tailwind CSS 环绕偏移宽度类的功能

ring-offset-0: 环绕与元素边缘之间没有额外空间。
ring-offset-1: 在环绕与元素边框之间添加 1 像素的空间。
ring-offset-2: 在环绕与元素边框之间添加 2 像素的空间。
ring-offset-4: 在环绕与元素边框之间添加 4 像素的空间。
ring-offset-8: 在环绕与元素边框之间添加 8 像素的空间。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 环绕偏移宽度类示例

以下是 Tailwind CSS 环绕偏移宽度类的示例，展示了如何调整元素边框与其环绕之间的空间。这些类允许您控制环绕距元素的偏移距离。

设置环绕偏移宽度

此示例展示了如何使用 Tailwind CSS 类来应用不同的环绕偏移宽度。环绕偏移应用于边框之外，其宽度可以使用 **ring-offset-*** 类进行调整。它不会影响元素的布局或占用的空间。

示例

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Ring Offset Width
    </h2> 
    <div class="grid grid-cols-2 gap-6">
        <p class="ring-offset-0 ring border border-black 
                p-4 rounded-md">
            <strong>ring-offset-0</strong>
        </p>
        <p class="ring-offset-1 ring border border-black 
                p-4 rounded-md">
            <strong>ring-offset-1</strong>
        </p>
        <p class="ring-offset-4 ring border border-black 
                p-4 rounded-md">
            <strong>ring-offset-4</strong>
        </p>
         <p class="ring-offset-8 ring border border-black 
                p-4 rounded-md">
            <strong>ring-offset-8</strong>
        </p> 
    </div>
    <p class="mt-6 text-center underline font-semibold">
        Use <strong>ring-offset-*</strong> classes to adjust 
        the ring offset width.
    </p>
</body>

</html>

使用 ring-offset 应用偏移宽度

此示例展示了如何使用 Tailwind CSS 的环绕偏移宽度类来调整元素边框与其环绕之间的空间。**ring-inset** 类将环绕定位在边框内并设置环绕偏移，这将在元素边框内显示环绕。

示例

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Ring Offset Width
    </h2> 
    <h3 class="font-bold underline mb-5">
       Applies offset width using the ring-offset classes:
    </h3>
    <div class="grid grid-cols-2 gap-6">
        <p class="ring-offset-2 ring ring-inset border 
            ring-teal-600 border-black p-4 rounded-md">
            <strong>ring-offset-2</strong>
        </p>
        <p class="ring-offset-4 ring ring-inset border 
            ring-teal-600 border-black p-4 rounded-md">
            <strong>ring-offset-4</strong>
        </p>
    </div>
    <div class="flex justify-center mt-4">
     <p class="ring-offset-8 ring ring-inset border 
            ring-teal-600 border-black p-4 rounded-md">
            <strong>Applies ring-offset-8</strong>
        </p> 
    </div>
</body>

</html>

基于悬停的环绕偏移调整

此示例展示了如何使用 Tailwind CSS 在您将鼠标悬停在元素上时更改环绕偏移宽度。最初，每个容器都具有默认的环绕宽度和颜色。在悬停时，环绕偏移会发生变化以创建视觉效果，例如将环绕向内或向外移动。

示例

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Ring Offset Width
    </h2> 
    <h3 class="font-bold underline mb-4">
        Hover to adjust ring offset width:
    </h3>
    <div class="grid grid-cols-2 gap-6">
        <p class="hover:ring-offset-2 hover:ring border 
            ring-teal-600 border-black p-4 rounded-md">
        <strong>2px Offset on Hover</strong>
        </p>
        <p class="hover:ring-offset-4 hover:ring border 
                    ring-teal-600 border-black p-4 rounded-md">
            <strong>4px Offset on Hover</strong>
        </p>
    </div>
    <div class="flex justify-center mt-6">
        <p class="ring ring-offset-8 ring-red-600 hover:ring-inset 
            hover:ring-offset-8  border border-black p-4
            rounded-md hover:ring-purple-500">
            <strong>8px offset, inset on hove</strong> 
        </p>
    </div>
</body>

</html>

打印页面