Tailwind CSS - 分割线宽度

Tailwind CSS 分割线宽度 类可以轻松设置分隔元素的线条宽度，帮助管理布局中的间距和分隔。

Tailwind CSS 分割线宽度类

以下是控制容器内嵌套元素之间分隔线宽度的 Tailwind CSS 分割线宽度类和属性列表。

类名	CSS 属性
divide-x-0	border-right-width: 0px; border-left-width: 0px;
divide-x-2	border-right-width: 0px; border-left-width: 2px;
divide-x-4	border-right-width: 0px; border-left-width: 4px;
divide-x-8	border-right-width: 0px; border-left-width: 8px;
divide-x	border-right-width: 0px; border-left-width: 1px;
divide-y-0	border-top-width: 0px; border-bottom-width: 0px;
divide-y-2	border-top-width: 2px; border-bottom-width: 0px;
divide-y-4	border-top-width: 4px; border-bottom-width: 0px;
divide-y-8	border-top-width: 8px; border-bottom-width: 0px;
divide-y	border-top-width: 1px; border-bottom-width: 0px;
divide-y-reverse	--tw-divide-y-reverse: 1;
divide-x-reverse	--tw-divide-x-reverse: 1;

Tailwind CSS 分割线宽度类的功能

divide-*-0: 删除子元素之间的线条，使其不可见。
divide-*-2: 在子元素之间添加细线 (2px)。
divide-*-4: 在子元素之间添加中等粗细的线 (4px)。
divide-*-8: 在子元素之间添加粗线 (8px)。
divide-* : 根据指定的值设置子元素之间线条的宽度。
divide-*-reverse: 反转子元素之间线条的顺序。

将“*”替换为水平分隔符的 x 或垂直分隔符的 y。

divide-x-reverse: 反转水平线的顺序。
divide-y-reverse: 反转垂直线的顺序。

Tailwind CSS 分割线宽度类示例

以下是 Tailwind CSS 分割线宽度类的示例，这些类允许我们设置元素之间分隔符的宽度，从而轻松控制布局中的间距和分隔。

不同宽度尺寸的水平分隔线

此示例演示如何使用 Tailwind CSS 应用不同宽度的水平分隔线。分隔线的宽度使用 **divide-x-{size}** 类进行调整，其中 size 决定水平分隔线的宽度。

示例

  
<!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 Divider Width
    </h2>
    <h3 class="font-bold underline mb-2">
       Horizontal Divider Width with Different Pixels
    </h3>
    <div class="space-y-4 mb-6">
        <ul class="flex divide-x-2 divide-black">
            <li class="p-4">Divider</li>
            <li class="p-4">with</li>
            <li class="p-4">2px</li>
        </ul>
        <ul class="flex divide-x-4 divide-black">
            <li class="p-4">Divider</li>
            <li class="p-4">with</li>
            <li class="p-4">4px</li>
        </ul>
        <ul class="flex divide-x-8 divide-black">
            <li class="p-4">Divider</li>
            <li class="p-4">with</li>
            <li class="p-4">8px</li>
        </ul>
    </div>
</body>

</html>

不同宽度尺寸的垂直分隔线

此示例演示 Tailwind CSS 如何使用 Divide Width 类调整垂直分隔线的粗细。通过应用 **divide-y-{sizes}** 类，您可以为这些分隔线设置不同的宽度，范围从 **1px** 到 **8px**。

示例

<!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 Divider Width
    </h2>
    <h3 class="font-bold underline mb-4">
       Vertical  Divider Width with Different Pixels
    </h3>
    <div class="space-y-4">
        <div class="divide-y divide-black">
            <p>Divider width 1px</p>
            <p>1px top divider width.</p>
        </div>
        <div class="divide-y divide-y-2 divide-black">
            <p>Divider width 2px</p>
            <p>2px top divider width.</p>
        </div>
         <div class="divide-y divide-y-8 divide-black">
            <p>Divider width 8px</p>
            <p>8px top divider width.</p>
        </div>
    </div>
</body>

</html>

垂直和水平分隔线顺序反转

此示例演示如何使用 Tailwind CSS 将反转分隔线类应用于水平和垂直分隔线。使用 **divide-x-reverse** 反转水平分隔线的顺序，使用 **divide-y-reverse** 反转垂直分隔线的顺序，从而改变它们的视觉顺序。

示例

<!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 Divider Width
    </h2>
    <div class="space-y-2">
        <h3 class="font-bold underline">
            Normal Horizontal Dividers
        </h3>
        <div class="flex divide-x divide-black">
            <div class="p-2">Item 1</div>
            <div class="p-2">Item 2</div>
            <div class="p-2">Item 3</div>
        </div>
        <h3 class="font-bold underline">
            Reversed Horizontal Dividers
        </h3>
        <div class="flex divide-x divide-x-reverse 
            divide-black">
            <div class="p-2">Item 1</div>
            <div class="p-2">Item 2</div>
            <div class="p-2">Item 3</div>
        </div>
        <h3 class="font-bold underline">
            Normal Vertical Dividers
        </h3>
        <div class="divide-y divide-black">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
        </div>
        <h3 class="font-bold underline">
            Reversed Vertical Dividers
        </h3>
        <div class="flex flex-col divide-y divide-y-reverse 
            divide-black">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
        </div> 
    </div>
</body>

</html>

打印页面