---
title: "形状令牌"
description: "圆角半径的阶梯，以及决定圆角如何弯曲的那一个数值。"
url: "https://tanrei.chnotchy.com/zh-cn/tokens/shape/"
last_updated: 2026-10-23T17:33:05.000Z
---

# 形状令牌

> 圆角半径的阶梯，以及决定圆角如何弯曲的那一个数值。

`tanrei.sys.shape.corner` 下的圆角半径。使用指引请阅读[形状](https://tanrei.chnotchy.com/zh-cn/foundations/shape/)。

| 令牌 | 值 | 备注 |
| --- | --- | --- |
| `--tanrei-sys-shape-corner-none` | 0px |  |
| `--tanrei-sys-shape-corner-extra-small` | 3px |  |
| `--tanrei-sys-shape-corner-small` | 6px | Default for controls: buttons, inputs, menu items, tooltips. |
| `--tanrei-sys-shape-corner-medium` | 8px |  |
| `--tanrei-sys-shape-corner-large` | 12px |  |
| `--tanrei-sys-shape-corner-large-increased` | 14px |  |
| `--tanrei-sys-shape-corner-extra-large` | 16px |  |
| `--tanrei-sys-shape-corner-extra-large-increased` | 20px |  |
| `--tanrei-sys-shape-corner-extra-extra-large` | 24px |  |
| `--tanrei-sys-shape-corner-full` | 9999px | Opt-in only: avatars, badges, segmented controls, pill variants. |

生成自 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/shape.tokens.json`

## 圆角平滑

`tanrei.sys.shape.corner-smoothing` 是一个 0 到 1 之间的量，含义与 Figma 相同：0 是四分之一圆，0.6 是 Figma 所说的 iOS 圆角，1 是最平缓的过渡。半径不随它改变。这个量的含义就是 Figma 的构造法；Compose 和 Flutter 按这种构造绘制，Web 绘制最接近的超椭圆，SwiftUI 和 iOS 上的 React Native 绘制操作系统自己的曲线（各自的差距见[形状](https://tanrei.chnotchy.com/zh-cn/foundations/shape/#%E5%9C%86%E8%A7%92%E5%B9%B3%E6%BB%91)）。各内置系统的取值：

| 设计系统 | `corner-smoothing` |
| --- | --- |
| `tanrei` | 0 |
| `cupertino` | 0.6 |
| `m3-expressive-like` | 0 |
| `m3-like` | 0 |

生成自 `tokens/systems/*.system.json`, `design/tokens/<system>/tanrei.light.tokens.json`