Tailwind CSS - 邊框樣式

Tailwind CSS **邊框樣式** 是預定義的類，允許您輕鬆設定元素邊框的不同樣式，包括其寬度、樣式（例如實線、虛線或點線）和半徑。

Tailwind CSS 邊框樣式類

以下是 Tailwind CSS 邊框樣式類列表，以及啟用元素各種邊框樣式的屬性。

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

Tailwind CSS 邊框樣式類的功能

**border-solid:** 在元素周圍應用實線邊框。
**border-dashed:** 在元素周圍應用虛線邊框。
**border-dotted:** 在元素周圍應用點線邊框。
**border-double:** 在元素周圍應用雙線邊框。
**border-hidden:** 隱藏邊框，使其不可見。
**border-none:** 移除邊框，使其不存在。

Tailwind CSS 邊框樣式類示例

以下是 Tailwind CSS 邊框樣式類的示例，它們顯示了不同的邊框樣式，例如實線、點線、虛線等。

定義邊框樣式

此示例顯示瞭如何使用 Tailwind CSS 邊框樣式類將不同的邊框樣式應用於 HTML 元素。

示例

 
<!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 Style
    </h2>
    <p class="p-4 border-4 border-solid border-blue-500 mb-4">
        Solid Border
    </p>
    <p class="p-4 border-4 border-dashed border-green-500 mb-4">
        Dashed Border
    </p>
    <p class="p-4 border-4 border-dotted border-red-500 mb-4">
        Dotted Border
    </p>
    <p class="p-4 border-4 border-double border-yellow-500">
        Double Border
    </p>
</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 Style
    </h2>
    <div class="p-4 border-4 border-dashed border-green-500 mb-4 
        hover:border-dotted hover:border-red-500">
        Dashed Border - Hover to Change to Dotted Yellow
    </div>
    <div class="p-4 border-4 border-dotted border-pink-600 
        mb-4 hover:border-solid hover:border-blue-500">
        Dotted Border - Hover to Change to Solid Blue
    </div>
    <div class="p-4 border-4 border-double border-yellow-500 
        hover:border-none">
        Double Border - Hover to Remove Border 
    </div>
</body> 

</html>

列印頁面