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 边框类来设置边框样式，包括样式、宽度、颜色和分隔属性。

Open Compiler
<!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 的轮廓和环形属性，包括颜色、样式、宽度、偏移和偏移颜色。

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