radius.md
基础 · FOUNDATION

圆角与细线 Radius & Hairline

圆角五档，同一层级用同一档：外层卡片 16，卡内嵌套 12。细线三档，同一用途用同一档。

来源设计系统源码源styles/v4/tokens.css源styles/v4/SPACING.md机读foundations/radius.md

圆角梯

样本令牌值用途
4px
8px
12px
16px
999px

另有 20 / 24 给大容器，50% 给圆形。高度 ≤ 8px 的进度条、微点允许 1–2px 端帽圆角。此前散布的 3/5/7/9/10/11/14/18 已按 ≤5→4、6–9→8、10–13→12、14–17→16、18–22→20 归一。

嵌套律

卡 16 · 内嵌 12
外层 16，内嵌 12
内距 16 − 边框 1 ≈ 圆角差 4
export function Nesting() {
  return (
    <div style={{ width: 320, padding: 16, borderRadius: 16, background: '#FFFFFF', border: '1px solid rgba(0,0,0,.09)' }}>
      <div style={{ aspectRatio: '16/9', borderRadius: 12, background: '#131316' }} />
      <div style={{ marginTop: 12, fontSize: 14, fontWeight: 600, lineHeight: '20px' }}>外层 16，内嵌 12</div>
      <div style={{ fontSize: 12.5, lineHeight: '20px', color: '#8B8B85' }}>内距 16 − 边框 1 ≈ 圆角差 4</div>
    </div>
  )
}

细线三档

样本令牌值用途
rgba(0, 0, 0, 0.07)
rgba(0, 0, 0, 0.09)
rgba(0, 0, 0, 0.14)

此前 .05/.06/.08/.1/.12/.13/.15/.16 散布 12 档，已归并到这三档。深于 .18 的深色遮罩与滚动条不属细线。分隔主要靠 1px 细线和留白分层，抬升感交给质感类的统一光影。

铁律

✓ 要按钮圆角矩形：sm/md 8、lg 12
✗ 不要按钮用 999 胶囊——胶囊只给不可点的徽章
✓ 要外层卡片 16、卡内嵌套 12
✗ 不要同一层级混用不同圆角
✓ 要细线只取 .07 / .09 / .14
✗ 不要.1、.12 这类中间值