Tailwind CSS - 圆角

上一页
下一页

Tailwind CSS **圆角** 包含预定义的类，用于圆化元素的角。这些类应用不同级别的圆角，范围从无圆角到完全圆角。

Tailwind CSS 圆角类

以下是 Tailwind CSS 圆角类和属性列表，用于使用各种选项圆化元素角。

类 CSS 属性
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.125rem; /* 2px */
rounded-s border-start-start-radius: 0.25rem; /* 4px */
border-end-start-radius: 0.25rem; /* 4px */
rounded-s-md border-start-start-radius: 0.375rem; /* 6px */
border-end-start-radius: 0.375rem; /* 6px */
rounded-s-lg border-start-start-radius: 0.5rem; /* 8px */
border-end-start-radius: 0.5rem; /* 8px */
rounded-s-xl border-start-start-radius: 0.75rem; /* 12px */
border-end-start-radius: 0.75rem; /* 12px */
rounded-s-2xl border-start-start-radius: 1rem; /* 16px */
border-end-start-radius: 1rem; /* 16px */
rounded-s-3xl border-start-start-radius: 1.5rem; /* 24px */
border-end-start-radius: 1.5rem; /* 24px */
rounded-s-full border-start-start-radius: 9999px;
border-end-start-radius: 9999px;
rounded-e-none border-start-end-radius: 0px;
border-end-end-radius: 0px;
rounded-e-sm border-start-end-radius: 0.125rem; /* 2px */
border-end-end-radius: 0.125rem; /* 2px */
rounded-e border-start-end-radius: 0.25rem; /* 4px */
border-end-end-radius: 0.25rem; /* 4px */
rounded-e-md border-start-end-radius: 0.375rem; /* 6px */
border-end-end-radius: 0.375rem; /* 6px */
rounded-e-lg border-start-end-radius: 0.5rem; /* 8px */
border-end-end-radius: 0.5rem; /* 8px */
rounded-e-xl border-start-end-radius: 0.75rem; /* 12px */
border-end-end-radius: 0.75rem; /* 12px */
rounded-e-2xl border-start-end-radius: 1rem; /* 16px */
border-end-end-radius: 1rem; /* 16px */
rounded-e-3xl border-start-end-radius: 1.5rem; /* 24px */
border-end-end-radius: 1.5rem; /* 24px */
rounded-e-full border-start-end-radius: 9999px;
border-end-end-radius: 9999px;
rounded-t-none border-top-left-radius: 0px;
border-top-right-radius: 0px;
rounded-t-sm border-top-left-radius: 0.125rem; /* 2px */
border-top-right-radius: 0.125rem; /* 2px */
rounded-t border-top-left-radius: 0.25rem; /* 4px */
border-top-right-radius: 0.25rem; /* 4px */
rounded-t-md border-top-left-radius: 0.375rem; /* 6px */
border-top-right-radius: 0.375rem; /* 6px */
rounded-t-lg border-top-left-radius: 0.5rem; /* 8px */
border-top-right-radius: 0.5rem; /* 8px */
rounded-t-xl border-top-left-radius: 0.75rem; /* 12px */
border-top-right-radius: 0.75rem; /* 12px */
rounded-t-2xl border-top-left-radius: 1rem; /* 16px */
border-top-right-radius: 1rem; /* 16px */
rounded-t-3xl border-top-left-radius: 1.5rem; /* 24px */
border-top-right-radius: 1.5rem; /* 24px */
rounded-t-full border-top-left-radius: 9999px;
border-top-right-radius: 9999px;
rounded-r-none border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
rounded-r-sm border-top-right-radius: 0.125rem; /* 2px */
border-bottom-right-radius: 0.125rem; /* 2px */
rounded-r border-top-right-radius: 0.25rem; /* 4px */
border-bottom-right-radius: 0.25rem; /* 4px */
rounded-r-md border-top-right-radius: 0.375rem; /* 6px */
border-bottom-right-radius: 0.375rem; /* 6px */
rounded-r-lg border-top-right-radius: 0.5rem; /* 8px */
border-bottom-right-radius: 0.5rem; /* 8px */
rounded-r-xl border-top-right-radius: 0.75rem; /* 12px */
border-bottom-right-radius: 0.75rem; /* 12px */
rounded-r-2xl border-top-right-radius: 1rem; /* 16px */
border-bottom-right-radius: 1rem; /* 16px */
rounded-r-3xl border-top-right-radius: 1.5rem; /* 24px */
border-bottom-right-radius: 1.5rem; /* 24px */
rounded-r-full border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
rounded-b-none border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
rounded-b-sm border-bottom-right-radius: 0.125rem; /* 2px */
border-bottom-left-radius: 0.125rem; /* 2px */
rounded-b border-bottom-right-radius: 0.25rem; /* 4px */
border-bottom-left-radius: 0.25rem; /* 4px */
rounded-b-md border-bottom-right-radius: 0.375rem; /* 6px */
border-bottom-left-radius: 0.375rem; /* 6px */
rounded-b-lg border-bottom-right-radius: 0.5rem; /* 8px */
border-bottom-left-radius: 0.5rem; /* 8px */
rounded-b-xl border-bottom-right-radius: 0.75rem; /* 12px */
border-bottom-left-radius: 0.75rem; /* 12px */
rounded-b-2xl border-bottom-right-radius: 1rem; /* 16px */
border-bottom-left-radius: 1rem; /* 16px */
rounded-b-3xl border-bottom-right-radius: 1.5rem; /* 24px */
border-bottom-left-radius: 1.5rem; /* 24px */
rounded-b-full border-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px;
rounded-l-none border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
rounded-l-sm border-top-left-radius: 0.125rem; /* 2px */
border-bottom-left-radius: 0.125rem; /* 2px */
rounded-l border-top-left-radius: 0.25rem; /* 4px */
border-bottom-left-radius: 0.25rem; /* 4px */
rounded-l-md border-top-left-radius: 0.375rem; /* 6px */
border-bottom-left-radius: 0.375rem; /* 6px */
rounded-l-lg border-top-left-radius: 0.5rem; /* 8px */
border-bottom-left-radius: 0.5rem; /* 8px */
rounded-l-xl border-top-left-radius: 0.75rem; /* 12px */
border-bottom-left-radius: 0.75rem; /* 12px */
rounded-l-2xl border-top-left-radius: 1rem; /* 16px */
border-bottom-left-radius: 1rem; /* 16px */
rounded-l-3xl border-top-left-radius: 1.5rem; /* 24px */
border-bottom-left-radius: 1.5rem; /* 24px */
rounded-l-full border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
rounded-ss-none border-start-start-radius: 0px;
rounded-ss-sm border-start-start-radius: 0.125rem; /* 2px */
rounded-ss border-start-start-radius: 0.25rem; /* 4px */
rounded-ss-md border-start-start-radius: 0.375rem; /* 6px */
rounded-ss-lg border-start-start-radius: 0.5rem; /* 8px */
rounded-ss-xl border-start-start-radius: 0.75rem; /* 12px */
rounded-ss-2xl border-start-start-radius: 1rem; /* 16px */
rounded-ss-3xl border-start-start-radius: 1.5rem; /* 24px */
rounded-ss-full border-start-start-radius: 9999px;
rounded-se-none border-start-end-radius: 0px;
rounded-se-sm border-start-end-radius: 0.125rem; /* 2px */
rounded-se border-start-end-radius: 0.25rem; /* 4px */
rounded-se-md border-start-end-radius: 0.375rem; /* 6px */
rounded-se-lg border-start-end-radius: 0.5rem; /* 8px */
rounded-se-xl border-start-end-radius: 0.75rem; /* 12px */
rounded-se-2xl border-start-end-radius: 1rem; /* 16px */
rounded-se-3xl border-start-end-radius: 1.5rem; /* 24px */
rounded-se-full border-start-end-radius: 9999px;
rounded-ee-none border-end-end-radius: 0px;
rounded-ee-sm border-end-end-radius: 0.125rem; /* 2px */
rounded-ee border-end-end-radius: 0.25rem; /* 4px */
rounded-ee-md border-end-end-radius: 0.375rem; /* 6px */
rounded-ee-lg border-end-end-radius: 0.5rem; /* 8px */
rounded-ee-xl border-end-end-radius: 0.75rem; /* 12px */
rounded-ee-2xl border-end-end-radius: 1rem; /* 16px */
rounded-ee-3xl border-end-end-radius: 1.5rem; /* 24px */
rounded-ee-full border-end-end-radius: 9999px;
rounded-es-none border-end-start-radius: 0px;
rounded-es-sm border-end-start-radius: 0.125rem; /* 2px */
rounded-es border-end-start-radius: 0.25rem; /* 4px */
rounded-es-md border-end-start-radius: 0.375rem; /* 6px */
rounded-es-lg border-end-start-radius: 0.5rem; /* 8px */
rounded-es-xl border-end-start-radius: 0.75rem; /* 12px */
rounded-es-2xl border-end-start-radius: 1rem; /* 16px */
rounded-es-3xl border-end-start-radius: 1.5rem; /* 24px */
rounded-es-full border-end-start-radius: 9999px;
rounded-tl-none border-top-left-radius: 0px;
rounded-tl-sm border-top-left-radius: 0.125rem; /* 2px */
rounded-tl border-top-left-radius: 0.25rem; /* 4px */
rounded-tl-md border-top-left-radius: 0.375rem; /* 6px */
rounded-tl-lg border-top-left-radius: 0.5rem; /* 8px */
rounded-tl-xl border-top-left-radius: 0.75rem; /* 12px */
rounded-tl-2xl border-top-left-radius: 1rem; /* 16px */
rounded-tl-3xl border-top-left-radius: 1.5rem; /* 24px */
rounded-tl-full border-top-left-radius: 9999px;
rounded-tr-none border-top-right-radius: 0px;
rounded-tr-sm border-top-right-radius: 0.125rem; /* 2px */
rounded-tr border-top-right-radius: 0.25rem; /* 4px */
rounded-tr-md border-top-right-radius: 0.375rem; /* 6px */
rounded-tr-lg border-top-right-radius: 0.5rem; /* 8px */
rounded-tr-xl border-top-right-radius: 0.75rem; /* 12px */
rounded-tr-2xl border-top-right-radius: 1rem; /* 16px */
rounded-tr-3xl border-top-right-radius: 1.5rem; /* 24px */
rounded-tr-full border-top-right-radius: 9999px;
rounded-br-none border-bottom-right-radius: 0px;
rounded-br-sm border-bottom-right-radius: 0.125rem; /* 2px */
rounded-br border-bottom-right-radius: 0.25rem; /* 4px */
rounded-br-md border-bottom-right-radius: 0.375rem; /* 6px */
rounded-br-lg border-bottom-right-radius: 0.5rem; /* 8px */
rounded-br-xl border-bottom-right-radius: 0.75rem; /* 12px */
rounded-br-2xl border-bottom-right-radius: 1rem; /* 16px */
rounded-br-3xl border-bottom-right-radius: 1.5rem; /* 24px */
rounded-br-full border-bottom-right-radius: 9999px;
rounded-bl-none border-bottom-left-radius: 0px;
rounded-bl-sm border-bottom-left-radius: 0.125rem; /* 2px */
rounded-bl border-bottom-left-radius: 0.25rem; /* 4px */
rounded-bl-md border-bottom-left-radius: 0.375rem; /* 6px */
rounded-bl-lg border-bottom-left-radius: 0.5rem; /* 8px */
rounded-bl-xl border-bottom-left-radius: 0.75rem; /* 12px */
rounded-bl-2xl border-bottom-left-radius: 1rem; /* 16px */
rounded-bl-3xl border-bottom-left-radius: 1.5rem; /* 24px */
rounded-bl-full border-bottom-left-radius: 9999px;

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 圆角类以及它们如何在网格布局中修改方框角的圆度，范围从 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 圆角类仅将圆角应用于元素的一侧。您可以只使顶部、底部、左侧或右侧的角圆角。

示例

<!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>

多个圆角边框侧面

此示例展示了如何组合不同的圆角类。通过组合多个圆角类，您可以为独特的设计混合和匹配不同的半径值，并将不同的圆角样式应用于元素的不同角。

示例

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