圆角

类

完全圆角使用固定的 pill 工具类，而不是圆角令牌；它只设置 border-radius: calc(infinity * 1px)。

值

八个预设圆角值都是 rem 长度。像素换算假设根元素字号为 16px。圆角只改变角的形状，不会设置盒子的尺寸。

圆角与裁剪相互独立

r-4xl 让父元素的背景与边框呈现圆角，不会为子元素设置相同圆角，也不会自动裁剪子元素的绘制区域。如果父元素应沿圆角边缘裁剪内容，请添加 overflow-hidden。

两个父元素都使用 r-4xl 与相同内容，只有右侧父元素添加 overflow-hidden。蓝色用于识别子表面，虚线轮廓则标示父元素的圆角边缘。

文字说明

1. 两个父盒子都使用 r-4xl，其预设值为 2rem。两者包含相同的子元素与父元素内容区域，尺寸由相同内容决定。
2. 左侧父元素保留默认的可见溢出。它自身的背景有圆角，但蓝色子元素仍在顶部绘制矩形。
3. 右侧父元素添加 overflow-hidden，将同一个子矩形沿父元素的圆角边缘裁剪；子元素并没有继承圆角值。
4. 虚线轮廓是检查用标注，不是 r-4xl 输出的边框。颜色只用于在两个示例中识别同一个子元素。

rtl- 这类物理族始终指向左上角。rss- 这类逻辑族遵循块起始侧与行内起始侧，因此对应的物理角取决于书写模式和方向。上方列出全部映射关系。

相邻曲线可能重叠时，浏览器会缩小过大的圆角值。因此 pill 应用于宽盒子时形成胶囊形，应用于正方形时形成圆形；它不会让元素变成正方形。

需要直角时，请使用直接值函数 r(0)，或对应单个角的形式，例如 rtl(0)。预设没有 --radius-none 令牌，也不接受 -r-md 这类负值令牌形式。

另见 原生圆角裁剪与直接值.

用法

从底板到其中的缩略图，逐步缩小圆角。

<div class="… r-lg">  <div class="… r-md">FN</div>  <div>    <p>Field notes</p>    <p>Every Friday</p>  </div>  <span class="… pill">Weekly</span></div>

@layer theme {  :root,  :host {    --radius-md: .375rem;    --radius-lg: .5rem  }}@layer utilities {  .r-lg {    border-radius: var(--radius-lg)  }  .r-md {    border-radius: var(--radius-md)  }  .pill {    border-radius: calc(infinity * 1px)  }}

自定义

修改预设值或添加令牌：--radius-card 会创建 r-card 和各个单角类。

@theme {  --radius-md: .5rem;  --radius-card: 1.25rem;}

@layer theme {  :root,  :host {    --radius-card: 1.25rem  }}@layer utilities {  .r-card {    border-radius: var(--radius-card)  }}

另见 主题指令与颜色.