Tailwind CSS - 邊框

上一頁
下一頁

Tailwind CSS **邊框**涵蓋了廣泛的預定義類，用於顏色、寬度和半徑，從而輕鬆設定元素邊框樣式。

Tailwind CSS 邊框參考

以下主題介紹瞭如何在元素上建立和調整邊框，包括其顏色、寬度、樣式、半徑等。

主題 描述 示例
Tailwind CSS - 邊框半徑 Tailwind CSS 中的邊框半徑控制元素角的圓度。
Tailwind CSS - 邊框寬度 邊框寬度使用預定義的尺寸選項控制元素邊框的粗細。
Tailwind CSS - 邊框顏色 邊框顏色設定元素周圍邊框的顏色。
Tailwind CSS - 邊框樣式 邊框樣式設定邊框的圖案，例如實線、虛線或點線。
Tailwind CSS - 分隔線寬度 分隔線寬度控制佈局中分隔線之間空間的粗細。
Tailwind CSS - 分隔線顏色 分隔線顏色設定佈局中元素之間分隔線的顏色。
Tailwind CSS - 分隔線樣式 分隔線樣式設定元素之間分隔線的圖案。
Tailwind CSS - 輪廓寬度 輪廓寬度控制元素周圍輪廓的粗細。
Tailwind CSS - 輪廓顏色 輪廓顏色定義元素周圍輪廓的顏色。
Tailwind CSS - 輪廓樣式 輪廓樣式設定用於元素輪廓的線型別，例如實線、虛線等等。
Tailwind CSS - 輪廓偏移 輪廓偏移控制元素邊框與其輪廓之間的距離。
Tailwind CSS - 環形寬度 環形寬度控制元素周圍環形的粗細。
Tailwind CSS - 環形顏色 環形顏色設定元素周圍環形的顏色。
Tailwind CSS - 環形偏移寬度 環形偏移寬度控制環形與元素邊框之間的距離。
Tailwind CSS - 環形偏移顏色 環形偏移顏色設定元素邊框與其環形之間空間的顏色。

Tailwind CSS 邊框示例

以下示例將說明 Tailwind CSS 邊框類，這些類可以替換 CSS 的所有與邊框相關的屬性。

示例 1

在以下示例中，我們將使用各種 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 Radius
    </h2>
    <p class="font-bold mb-3 underline">
        Different Border Radius Sizes:
    </p>
    <div class="grid grid-cols-3 gap-4 mb-6">
        <div>
            <p class="underline">rounded-sm</p> 
            <div class="w-20 h-10 bg-green-400 rounded-sm"></div>
        </div>
        <div>
            <p class="underline">rounded</p> 
            <div class="w-20 h-10 bg-green-600 rounded"></div>
        </div>
        <div>
            <p class="underline">rounded-full</p> 
            <div class="w-20 h-10 bg-green-800 rounded-full"></div>
        </div>
    </div>
    <p class="underline mb-8">Use <strong>rounded-*</strong>
        for sizes md, lg, xl, 2xl, and 3xl.
    </p>
    <p class="font-bold mb-4 underline">
        Different Border Styles, Colors, and Widths:
    </p> 
    <div class="grid grid-cols-2 gap-5 mb-8">
        <div class="flex border-2 w-46 h-14 border-dashed 
            border-teal-500 items-center justify-center">
            Dashed Teal Border (2px)
        </div>
        <div class="flex border-2 w-46 h-14 border-dotted
            border-amber-500 items-center justify-center">
            Dotted Amber Border (2px)
        </div>
    </div>
    <p class="font-bold mb-4 underline">
        Different Divider Widths, Colors, and Styles:
    </p>
    <div class="space-y-4">
       <div class="divide-y-4 divide-double divide-black">
            <p><strong>4px Double divider</strong> example.
            </p>
            <p>Separates content with a double black color line.</p>
        </div>
    </div>
</body>

</html>

示例 2

在以下示例中，我們將介紹 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 Borders Examples
    </h2>
     <p class="font-bold mb-4 underline">
        Different Outline Widths, Colors, Styles and Offset:
    </p>
    <div class="gap-6 grid grid-cols-2 mb-8">
        <p class="border border-black outline outline-offset-2 
            outline-4 outline-indigo-600 outline-double">
            4px double indigo outline.
        </p>
        <p class="outline outline-offset-4 outline-pink-400
        border border-black">
            Offset-4px: pink outline.
        </p>
    </div>
    <p class="font-bold mb-5 underline">
        Different Ring widths and colors with Offset 
        widths and colors:
    </p>
    <div class="grid grid-cols-2 gap-5 mb-6">
        <p class="ring-2 ring-blue-500 ring-offset-4 
            border border-black rounded-md">
            2-pixel ring with offset-4.
        </p>
         <p class="ring-2 ring-emerald-600 ring-offset-4 border
            ring-offset-emerald-200 border-black rounded-md">
             Emerald ring offset color 
        </p>
    </div>
    <div class="flex justify-center mt-8 mb-10">
        <p class="ring ring-offset-8 ring-red-600 
            hover:ring-inset hover:ring-offset-8 ring-offset-red-200 
            border-black p-2 rounded-md hover:ring-purple-600 
            hover:ring-offset-purple-200 border border-black">
                8px red offset, turns purple inset on 
                <strong>Hover</strong> 
        </p>
    </div>
</body>

</html>
列印頁面
上一頁
下一頁
廣告