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>

列印頁面