rounded-lg 和 rounded-full 是 Tailwind 中设置 border-radius 的实用类，仅作用于容器外边缘；若元素无尺寸、背景、边框或内容，则圆角不可见，且需注意宽高不等导致椭圆、overflow 裁剪、方位控制及抗锯齿等问题。
rounded-lg 和 rounded-full 是 Tailwind 中控制圆角的实用类，但它们只作用于元素的「外边缘」——不是边框本身变圆，而是容器盒模型的 border-radius 值。用错地方或忽略底层机制，很容易出现“明明加了类却没效果”的情况。
为什么加了 rounded-full 还是直角？
最常见原因是元素没有明确的尺寸或背景/边框，导致圆角不可见。Tailwind 的圆角类只是设置 border-radius，它不会自动让一个空的 <div> 显出弧度。
<ul>
<li>必须有可渲染的视觉内容：比如 <code>background-color、border，或子元素撑开高度宽度
overflow: hidden（如卡片组件），而子元素超出边界，圆角会被裁掉——这时要确保圆角设在「最外层容器」上rounded-full 实际对应 border-radius: 9999px，本质是“足够大以形成半圆”，但如果元素宽高不等（比如宽 200px、高 40px），结果是横向拉伸的椭圆，不是正圆
rounded-lg 的实际像素值和响应式行为
rounded-lg 默认解析为 border-radius: 0.5rem（即 8px），这个值来自 Tailwind 的默认 theme 配置。它不随屏幕尺寸变化——Tailwind 的圆角类本身不支持原生响应式前缀（如 sm:rounded-lg 是可用的，但那是断点控制，不是类自身响应）。
- 想在小屏用
rounded-md、大屏用rounded-xl，得显式写rounded-md md:rounded-xl - 自定义圆角需修改
theme.borderRadius，比如加一个pill值对应50px，然后就能用rounded-pill - 注意：所有
rounded-*类都同时作用于四个角；要单独控制某角，得用rounded-tl-lg（左上）、rounded-br-full（右下）这类方位类
和边框（border）一起用时的常见错觉
很多人以为加了 rounded-full 再加 border 就能做出“带边框的圆按钮”，结果发现边框在圆角处发虚或有锯齿。这不是 Tailwind 的问题，而是 CSS 渲染限制：
立即学习“前端免费学习笔记（深入）”；
- 当
border-width较大（如border-4）且border-radius不够匹配时，角落会显得生硬甚至断裂 - 解决方法不是调 class，而是检查是否同时设置了
border和background-color：纯边框 + 圆角在低分辨率屏上抗锯齿弱，加个背景色通常立刻改善视觉连贯性 - 若需高清圆角边框，建议改用
outline（但 outline 不占布局空间，也不能设圆角）或直接写 CSS：border-radius: 9999px; border: 2px solid #3b82f6;
真正容易被忽略的是：圆角生效的前提，是元素得是个「盒」。没有宽高、没有内容、没有背景、没有边框、又没设置 overflow，那 rounded-full 就只是个安静的 CSS 声明而已——它没失效，只是你根本看不见。
