Tailwind CSS - 边框宽度

Tailwind CSS 边框宽度 包含预定义类，可快速调整元素的边框粗细，范围从细到粗。您可以轻松地将这些粗细应用于元素的四个边。

Tailwind CSS 边框宽度类

以下是 Tailwind CSS 边框宽度类和属性的列表，展示了如何使用类调整边框粗细。

Tailwind CSS 边框宽度类的功能

• border-*-0: 将边框宽度设置为 0 像素。
• border-*-2: 将边框宽度设置为 2 像素。
• border-*-4: 将边框宽度设置为 4 像素。
• border-*-8: 将边框宽度设置为 8 像素。
• border: 将所有边的边框宽度设置为 1 像素。

将"*"替换为特定边(例如 x、y、s、e、t、r、b、l)，其中:

• border-x: 设置左侧和右侧的边框宽度两侧。
• border-y: 设置顶部和底部的边框宽度。
• border-s: 设置内联起始侧的边框宽度(从左到右文本方向的左侧)。
• border-e: 设置内联结束侧的边框宽度(从左到右文本方向的右侧)。
• border-t: 设置顶部的边框宽度。
• border-r: 设置右侧的边框宽度。
• border-b: 设置底部的边框宽度。
• border-l: 设置左侧的边框宽度。

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-4">
        Tailwind CSS Border Width
    </h2> 
   <h3> Combined Border Width Classes</h3>
    <div class="border-t-4 border-r-2 border-b-4 
    border-l-8 border-blue-700 p-4">
        This div has:
        <ul>
            <li>4-pixel border at the top</li>
            <li>2-pixel border on the right</li>
            <li>4-pixel border at the bottom</li>
            <li>8-pixel border on the left</li>
        </ul>
    </div>
</body>

</html>

特定边的边框宽度

此示例展示了如何使用 Tailwind CSS 边框宽度类为元素的每一边应用不同的边框宽度。您可以针对各个边，例如左侧、右侧、顶部和底部。

示例

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

<body class="p-6">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Border Width
    </h2>
    <p class="text-xl font-bold mb-4">
        Applying different Border Width Classes:
    </p>
    <div class="grid grid-cols-4 gap-4 mb-6">
        <div>
            <p class="underline font-bold">border-x-4</p>
            <div class="w-20 h-20 border-cyan-600 
                border-x-4 bg-gray-300">
                Left & Right: 4px</div>
        </div>
        <div>
            <p class="underline font-bold">border-y-4</p>
            <div class="w-20 h-20 border-cyan-600 
                border-y-4  bg-gray-300">
                Top & Bottom: 4px
            </div>
        </div>
        <div>
            <p class="underline font-bold">border-s-4</p>
            <div class="w-20 h-20 border-cyan-600 
                border-s-4  bg-gray-300">
                Start 4px
            </div>
        </div>
        <div>
            <p class="underline font-bold">border-e-4</p>
            <div class="w-20 h-20 border-cyan-600 
                border-e-4  bg-gray-300">
                End 4px
            </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 Border Width
    </h2>
    <p class="text-xl font-bold mb-4">
        Single-Side Border Width Examples
    </p>
    <div class="grid grid-cols-4 gap-4 mb-6">
        <div>
            <p class="underline font-bold mb-2 
                text-center">border-t-4</p>
            <div class="w-20 h-20 border-t-4 
                border-blue-600  bg-gray-300">
                 Top: 4px 
             </div>
         </div>
        <div>
            <p class="underline font-bold">border-b-4</p>
            <div class="w-20 h-20 bg-gray-300 border-red-600 
                border-b-4 ">Bottom: 4px</div>
        </div>
        <div>
            <p class="underline font-bold">border-r-4</p>
            <div class="w-20 h-20 border-green-600 
                border-r-4  bg-gray-300">
                Right: 4px
            </div>
        </div>
        <div>
            <p class="underline font-bold">border-l-4</p>
            <div class="w-20 h-20 border-pink-600 
                border-l-4  bg-gray-300">
                Left: 4px
            </div>
        </div>
    </div>
</body>

</html>

应用边框划分版块

此示例展示了使用不同的边框宽度和颜色来分隔布局中的版块。每个句子都使用不同的边框宽度和颜色来突出显示分隔。

示例

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

<body class="p-4 bg-gray-100">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Border Width
    </h2>
    <h2 class="text-xl font-bold mb-6">
        Borders Applied to Divide Sections
    </h2>
    <div class="max-w-md mx-auto bg-white shadow-lg ">
        <div class="p-4 border-b-2 border-blue-500">
            <h3 class="text-lg font-semibold">Section 1</h3>
            <p>This section has a 2-pixel thick blue 
                border at the bottom.
            </p>
        </div> 
        
        <div class="p-4 border-b-4 border-green-500">
            <h3 class="text-lg font-semibold">Section 2</h3>
            <p>This section has a 4-pixel 
                thick green border at the bottom.
            </p>
        </div> 
        
        <div class="p-4 border-b-8 border-red-500">
            <h3 class="text-lg font-semibold">Section 3</h3>
            <p>This section has an 8-pixel 
                thick red border at the bottom.
            </p>
        </div>
    </div>
</body>

</html>