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>
列印頁面
上一頁
下一頁
廣告