Tailwind CSS - 分割樣式

Tailwind CSS 分割樣式是預定義的類，允許您輕鬆設定用於分隔元素的線條的不同樣式，包括其寬度和樣式（例如實線、虛線或點線）。

Tailwind CSS 分割樣式類

以下是控制分隔元素線條外觀的 Tailwind CSS 分割樣式類的列表。

類名	CSS 屬性
divide-solid	border-style: solid;
divide-dashed	border-style: dashed;
divide-dotted	border-style: dotted;
divide-double	border-style: double;
divide-none	border-style: none;

Tailwind CSS 分割樣式類的功能

divide-solid: 在元素之間插入一條連續的線。
divide-dashed: 在元素之間插入一條虛線。
divide-dotted: 在元素之間插入一條點線。
divide-double: 在元素之間插入兩條堆疊的線。
divide-none: 刪除元素之間的線條。

Tailwind CSS 分割樣式類示例

以下是 Tailwind CSS 分割樣式類的示例，顯示了用於分隔元素的不同線樣式，例如實線、虛線和點線。

設定不同的垂直分割線樣式

此示例演示如何使用不同的 Tailwind CSS 分割線樣式類將各種垂直分割線樣式應用於段落、列表或您想要垂直分割的任何元素。

示例

  
<!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 Styles
    </h2>
    <h3 class="font-bold underline mb-4">
        Applying Different Vertical Dividers
    </h3>
    <div class="space-y-4">
        <div class="divide-y-4 divide-solid divide-black">
            <p><strong>Solid divider</strong> example.</p>
            <p>Separates content with a solid line.</p>
        </div>

        <div class="divide-y-4 divide-dashed divide-black">
            <p><strong>Dashed divider</strong> example.</p>
            <p>Separates content with a dashed line.</p>
        </div>

        <div class="divide-y-4 divide-dotted divide-black">
            <p><strong>Dotted divider</strong> example.</p>
            <p>Separates content with a dotted line.</p>
        </div>

        <div class="divide-y-4 divide-double divide-black">
            <p><strong>Double divider</strong> example.</p>
            <p>Separates content with a double line.</p>
        </div>

        <div class="divide-y divide-none">
            <p><strong>No divider</strong> example.</p>
            <p>No line is used to separate the content.</p>
        </div>
    </div>
</body>

</html>

更改懸停時的分割線樣式

此示例演示如何使用 Tailwind CSS 分割線類在懸停時更改分割線樣式。它顯示了在您將滑鼠懸停在元素上時更新的不同分割線樣式。

示例

<!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 Styles
    </h2>
    <h3 class="font-bold underline mb-2">
       Applying Hover Divider Styles with 4px Width
    </h3>
    <div class="divide-y-4 divide-dashed divide-green-500 
        hover:divide-dotted hover:divide-red-500 mb-4">
        <div>Dashed Divider - Hover to Change to Dotted Red</div>
        <div>Dashed Divider - Hover to Change to Dotted Red</div>
    </div>
    
    <div class="divide-y-4 divide-dotted divide-pink-600 
        hover:divide-solid hover:divide-blue-500 mb-4">
        <div>Dotted Divider - Hover to Change to Solid Blue</div>
        <div>Dotted Divider - Hover to Change to Solid Blue</div>
    </div>
    
    <div class="divide-y-4 divide-double 
        divide-yellow-500 hover:divide-none">
        <div>Double Divider - Hover to Remove Divider</div>
        <div>Double Divider - Hover to Remove Divider</div>
    </div>
</body>

</html>

列印頁面