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: 删除元素之间的线条。

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 分割线样式类将各种垂直分割线样式应用于段落、列表或您想要垂直分割的任何元素。

示例

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 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 分割线类在悬停时更改分割线样式。它显示了在您将鼠标悬停在元素上时更新的不同分割线样式。

示例

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 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>

打印页面