Tailwind CSS 定义圆角
在现代网页设计中，直角边框往往显得过于生硬，而 “圆角” 则能让页面看起来更加柔和、高级。比如咱们的绿叶网在设计的时候，就使用了大量的圆角效果。
在 Tailwind CSS 中，我们可以使用 “rounded-*” 相关类名来定义元素的圆角效果（相当于传统 CSS 中的 border-radius）。
语法：
rounded-*说明：
其中，常用的圆角类名如下表所示。
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| rounded-none（默认） | border-radius: 0px; | 去除圆角（直角） |
| rounded-sm | border-radius: 0.125rem; | 小圆角 |
| rounded | border-radius: 0.25rem; | 正常圆角 |
| rounded-md | border-radius: 0.375rem; | 中圆角 |
| rounded-lg | border-radius: 0.5rem; | 大圆角 |
| rounded-xl | border-radius: 0.75rem; | 超大圆角 |
| rounded-2xl | border-radius: 1rem; | 特大圆角 |
| rounded-3xl | border-radius: 1.5 rem; | 巨型圆角 |
| rounded-full | border-radius: 9999px; | 全圆角 |
Tailwind CSS 圆角示例
接下来，我们通过几个简单的例子来讲解一下如何使用 Tailwind CSS 来定义圆角效果。
示例 1：使用圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-8">
<div class="w-24 h-24 bg-red-400 rounded-2xl"></div>
<div class="w-24 h-24 bg-green-400 rounded-full mt-6"></div>
</body>
</html>页面效果如下图所示。
分析：
对于第 1 个 div 来说，rounded-2xl 表示将四个角变成了 16px 的平滑大圆角。
对于第 2 个 div 来说，由于这个方块的宽度和高度是一样的（都是 w-24 h-24），因此加上 rounded-full 后，它直接变成了一个正圆形。
Tailwind CSS 单独圆角
在实际开发中（比如做商品卡片或拼接按钮时），我们经常需要实现 “上面两个角是圆的、下面两个角是直角” 的效果。
在 Tailwind CSS 中，我们只需要加上方向前缀，就可以实现某个方向的圆角。
语法：
rounded-{方向}-{尺寸}说明：
其中，“方向” 可以是以下取值：
t（top）：顶部两个角。b（bottom）：底部两个角。l（left）/ r（right）：左侧 / 右侧两个角。tl（top-left）：仅左上角。
示例 2：单侧圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="w-48 h-32 bg-indigo-400 rounded-t-2xl"></div>
<div class="w-32 h-10 bg-purple-400 rounded-r-full mt-4"></div>
</body>
</html>页面效果如下图所示。
分析：
对于第 1 个 div 来说，rounded-t-2xl 表示定义了顶部左右两侧为超大圆角。
对于第 2 个 div 来说，rounded-r-full 表示定义了右侧为半圆形。
Tailwind CSS 圆角 “任意值”
在 Tailwind CSS 中，我们可以使用中括号 “[]” 语法来定义任意值的圆角。
语法：
rounded-[数值]说明：
比如 rounded-[20px] 表示将四个角的圆角定义为 20px，而 rounded-t-[20px] 表示将顶部两个角的圆角定义为 20px。
示例 3：任意值圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="w-24 h-24 bg-green-300 rounded-[10px]"></div>
</body>
</html>页面效果如下图所示。
分析：
rounded-[10px] 表示将四个角的圆角定义为 10px。
常见问题
1. 为什么我使用了 rounded-full，结果变成了一个椭圆，而不是一个正圆呢？
rounded-full 的底层逻辑是把圆角半径拉到极大。
- 如果你的盒子是一个 “正方形”（宽高一致），它就会变成正圆。
- 如果你的盒子是一个 “长方形”（宽高不一致，如按钮 w-32 h-10），它就会变成一个两头圆、中间平的胶囊形（Pill）。
因此如果想要实现正圆效果，我们一定要保证 w 和 h 的数值相等才行。
