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>
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.