笙亿网络策划

Tailwind CSS 怎么设置 Border Radius？圆角样式该怎么调？

约 19 分钟读完 1 阅
文章导读
上一个 测验 下一个 Tailwind CSS 的 Border Radius 由预定义的 class 组成，用于为元素的角落添加圆角。这些 class 应用不同程度的圆角效果，从无圆角到完全圆角。
📋 目录
  1. A Tailwind CSS 圆角类
  2. B Tailwind CSS 圆角类功能
  3. C Tailwind CSS 圆角类示例
  4. D 实现圆角边框
  5. E 在特定边上设置圆角边框
  6. F 单侧圆角边框
  7. G 多侧圆角边框
  8. H 输入框的圆角边框
A A

Tailwind CSS - 圆角边框

上一个
测验
下一个

Tailwind CSS 的 Border Radius 由预定义的 class 组成，用于为元素的角落添加圆角。这些 class 应用不同程度的圆角效果，从无圆角到完全圆角。

Tailwind CSS 圆角类

以下是 Tailwind CSS 圆角类的列表及其属性，用于为元素边角提供各种圆角选项。

Class CSS Properties
rounded-none border-radius: 0px;
rounded-sm border-radius: 0.125rem; /* 2px */
rounded border-radius: 0.25rem; /* 4px */
rounded-md border-radius: 0.375rem; /* 6px */
rounded-lg border-radius: 0.5rem; /* 8px */
rounded-xl border-radius: 0.75rem; /* 12px */
rounded-2xl border-radius: 1rem; /* 16px */
rounded-3xl border-radius: 1.5rem; /* 24px */
rounded-full border-radius: 9999px;
rounded-s-none border-start-start-radius: 0px;
border-end-start-radius: 0px;
rounded-s-sm border-start-start-radius: 0.125rem; /* 2px */
border-end-start-radius: 0

Tailwind CSS 圆角类功能

  • rounded-*-none: 这将应用无圆角，半径为 0px。
  • rounded-*-sm: 这将应用小圆角，半径为 0.125rem (2px)。
  • rounded-*: 这将应用默认圆角，半径为 0.25rem (4px)。
  • rounded-*-md: 这将应用中等圆角，半径为 0.375rem (6px)。
  • rounded-*-lg: 这将应用大圆角，半径为 0.5rem (8px)。
  • rounded-*-xl: 这将应用超大圆角，半径为 0.75rem (12px)。
  • rounded-*-2xl: 这将应用 2 倍超大圆角，半径为 1rem (16px)。
  • rounded-*-3xl: 这将应用 3 倍超大圆角，半径为 1.5rem (24px)。
  • rounded-*-full: 这将应用完全圆角，半径为 9999px。

用特定边或角替换 '*'（例如 s、e、t、r、b、l、ss、se、ee、es、tl、tr、br、bl），其中：

  • rounded-s: 圆化起始侧的角（左侧）。
  • rounded-e: 圆化结束侧的角（右侧）。
  • rounded-t: 圆化顶部角（左上和右上）。
  • rounded-r: 圆化右侧角（右上和右下）。
  • rounded-b: 圆化底部角（右下和左下）。
  • rounded-l: 圆化左侧角（左上和左下）。
  • rounded-ss: 圆化起始-起始角（左上）。
  • rounded-se: 圆化起始-结束角（右上）。
  • rounded-ee: 圆化结束-结束角（右下）。
  • rounded-es: 圆化结束-起始角（左下）。
  • rounded-tl: 圆化左上角。
  • rounded-tr: 圆化右上角。
  • rounded-br: 圆化右下角。
  • rounded-bl: 圆化左下角。

Tailwind CSS 圆角类示例

以下是 Tailwind CSS 圆角类的示例，展示了如何使用各种尺寸圆化元素角。这些类让为设计添加平滑、自定义曲线的过程变得简单。

实现圆角边框

这个示例展示了不同的 Tailwind CSS Border Radius 类，以及它们如何在网格布局中修改盒子角落的圆角度，从 rounded-sm 到 rounded-full。

示例

 
<!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 Radius
    </h2>
    <p class="text-xl font-bold mb-4">Border Radius Sizes</p>
    <div class="grid grid-cols-3 gap-4 mb-6">
        <div>
            <p class="underline font-bold">rounded-none</p> 
            <div class="w-20 h-20 bg-green-500 rounded-none"></div>
        </div>
        <div>
            <p class="underline font-bold">rounded-sm</p> 
            <div class="w-20 h-20 bg-green-300 rounded-sm"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded</p> 
            <div class="w-20 h-20 bg-green-400 rounded"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-md</p>
            <div class="w-20 h-20 bg-green-500 rounded-md"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-lg</p> 
            <div class="w-20 h-20 bg-green-600 rounded-lg"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-xl</p>
            <div class="w-20 h-20 bg-green-700 rounded-xl"></div>
            <p class="font-bold">Can be applied similarly 
            <br>for 2xl and 3xl.</p>
        </div>
        <div>
            <p class="underline font-bold">rounded-full</p> 
            <div class="w-20 h-20 bg-green-900 rounded-full"></div>
        </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 Radius
    </h2>
    <p class="text-xl font-bold mb-4">
        Rounded Corners on Specific Sides
    </p>
    <div class="grid grid-cols-2 gap-4">
        <div>
            <p class="underline font-bold">rounded-tl</p> 
            <div class="w-20 h-20 bg-blue-500 rounded-tl-md"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-tr</p> 
            <div class="w-20 h-20 bg-red-500 rounded-tr-lg"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-bl</p> 
            <div class="w-20 h-20 bg-yellow-500 rounded-bl-xl"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-br</p> 
            <div class="w-20 h-20 bg-purple-500 rounded-br-2xl"></div>
        </div>
    </div>
</body>

</html>

单侧圆角边框

本示例展示了如何使用 Tailwind CSS Border Radius Classes 仅对元素的一侧应用 border radius。你可以仅对顶部、底部、左侧或右侧角落进行圆角处理。

示例

<!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 Radius  
    </h2>
    <p class="text-xl font-bold mb-4">
        Single-Side Border Radius Examples
    </p>
    <div class="grid grid-cols-2 gap-4 mb-6">
        <div>
            <p class="underline font-bold">rounded-tl-md</p> 
            <div class="w-20 h-20 bg-blue-300 rounded-tl-md"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-tr-lg</p> 
            <div class="w-20 h-20 bg-red-300 rounded-tr-lg"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-bl-xl</p> 
            <div class="w-20 h-20 bg-green-300 rounded-bl-xl"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-br-2xl</p> 
            <div class="w-20 h-20 bg-yellow-300 rounded-br-2xl"></div>
        </div>
    </div>
</body>

</html>

多侧圆角边框

本示例展示了如何组合不同的 border radius classes。通过同时使用多个 radius classes，你可以混合匹配不同的 radius 值，创建独特的设计，并为元素的不同角落应用不同的圆角样式。

示例

<!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 Radius
    </h2>
    <p class="text-xl font-bold mb-2">
        Combining Different Border Radius Sizes
    </p>
    <div class="grid grid-cols-2 gap-4 mb-6">
        <div>
            <p class="underline font-bold">rounded-tl-lg rounded-br-xl</p> 
            <div class="w-20 h-20 bg-cyan-300 rounded-tl-lg rounded-br-xl"></div>
        </div>
        
        <div>
            <p class="underline font-bold">rounded-tr-md rounded-bl-lg</p> 
            <div class="w-20 h-20 bg-orange-300 rounded-tr-md rounded-bl-lg"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-t-md rounded-b-xl</p> 
            <div class="w-20 h-20 bg-teal-300 rounded-t-md rounded-b-xl"></div>
        </div>

        <div>
            <p class="underline font-bold">rounded-tl-xl rounded-br-md</p> 
            <div class="w-20 h-20 bg-purple-300 rounded-tl-xl rounded-br-md"></div>
        </div>
    </div>
</body>

</html>

输入框的圆角边框

此示例展示了应用于输入框的不同边框半径尺寸，突出了不同圆角程度如何影响表单字段设计。

示例

<!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 Radius 
    </h2>
    <p class="text-xl font-bold mb-4">
        Different Border Radius Sizes for Form Inputs
    </p>
    <div class="grid grid-cols-2 gap-4 mb-6">
        <div>
            <p class="underline font-bold">rounded-sm</p> 
            <input type="text" placeholder="Small Radius" 
            class="w-full p-2 border-2 border-blue-500 rounded-sm">
        </div>

        <div>
            <p class="underline font-bold">rounded-md</p> 
            <input type="text" placeholder="Medium Radius" 
            class="w-full p-2 border-2 border-blue-500 rounded-md">
        </div>

        <div>
            <p class="underline font-bold">rounded-lg</p> 
            <input type="text" placeholder="Large Radius" 
            class="w-full p-2 border-2 border-blue-500 rounded-lg">
        </div>

        <div>
            <p class="underline font-bold">rounded-xl</p> 
            <input type="text" placeholder="Extra-large Radius" 
            class="w-full p-2 border-2 border-blue-500 rounded-xl">
        </div>
    </div>
</body>

</html>