Tailwind CSS - 边框宽度

上一页
下一页

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

Tailwind CSS 边框宽度类

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

类 CSS 属性
border-0 border-width: 0px;
border-2 border-width: 2px;
border-4 border-width: 4px;
border-8 border-width: 8px;
border border-width: 1px;
border-x-0 border-left-width: 0px;
border-right-width: 0px;
border-x-2 border-left-width: 2px;
border-right-width: 2px;
border-x-4 border-left-width: 4px;
border-right-width: 4px;
border-x-8 border-left-width: 8px;
border-right-width: 8px;
border-x border-left-width: 1px;
border-right-width: 1px;
border-y-0 border-top-width: 0px;
border-bottom-width: 0px;
border-y-2 border-top-width: 2px;
border-bottom-width: 2px;
border-y-4 border-top-width: 4px;
border-bottom-width: 4px;
border-y-8 border-top-width: 8px;
border-bottom-width: 8px;
border-y border-top-width: 1px;
border-bottom-width: 1px;
border-s-0 border-inline-start-width: 0px;
border-s-2 border-inline-start-width: 2px;
border-s-4 border-inline-start-width: 4px;
border-s-8 border-inline-start-width: 8px;
border-s border-inline-start-width: 1px;
border-e-0 border-inline-end-width: 0px;
border-e-2 border-inline-end-width: 2px;
border-e-4 border-inline-end-width: 4px;
border-e-8 border-inline-end-width: 8px;
border-e border-inline-end-width: 1px;
border-t-0 border-top-width: 0px;
border-t-2 border-top-width: 2px;
border-t-4 border-top-width: 4px;
border-t-8 border-top-width: 8px;
border-t border-top-width: 1px;
border-r-0 border-right-width: 0px;
border-r-2 border-right-width: 2px;
border-r-4 border-right-width: 4px;
border-r-8 border-right-width: 8px;
border-r border-right-width: 1px;
border-b-0 border-bottom-width: 0px;
border-b-2 border-bottom-width: 2px;
border-b-4 border-bottom-width: 4px;
border-b-8 border-bottom-width: 8px;
border-b border-bottom-width: 1px;
border-l-0 border-left-width: 0px;
border-l-2 border-left-width: 2px;
border-l-4 border-left-width: 4px;
border-l-8 border-left-width: 8px;
border-l border-left-width: 1px;

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>
打印页面
上一页
下一页
广告