圆角

¥Radius

在主题中选择合适的圆角设置。

主题设置

¥Theme setting

主题 radius 设置管理应用于组件的圆角因子：

¥Theme radius setting manages the radius factor applied to the components:

<Theme radius="medium">
	<TextField.Root size="3" placeholder="Reply…">
		<TextField.Slot side="right" px="1">
			<Button size="2">Send</Button>
		</TextField.Slot>
	</TextField.Root>
</Theme>

生成的 border-radius 与上下文相关，并根据组件的不同而有所不同。例如，当设置为 full 时，按钮 会变成药丸状，而 复选框 永远不会变成完全圆润的形状，以避免与 单选按钮 混淆。

¥The resulting border-radius is contextual and differs depending on the component. For example, when set to full, a Button becomes pill-shaped, while a Checkbox will never become fully rounded to prevent any confusion between it and a Radio.

<Theme radius="full">
	<Flex align="center" gap="3">
		<Button>Save</Button>
		<Switch defaultChecked />
		<Checkbox defaultChecked />
	</Flex>
</Theme>

圆角覆盖

¥Radius overrides

某些组件允许你使用其自身的 radius 属性覆盖圆角因子。

¥Certain components allow you to override the radius factor using their own radius prop.

<Flex align="center" gap="3">
	<Button radius="none">Save</Button>
	<Button radius="small">Save</Button>
	<Button radius="medium">Save</Button>
	<Button radius="large">Save</Button>
	<Button radius="full">Save</Button>
</Flex>

渲染面板的组件（例如 Card、Dialog 和 Popover 等）将不具有 radius 属性，但会从主题中继承圆角设置。radius 属性在大多数基于文本的组件上也不可用。

¥Components that render panels, like Card, Dialog, and Popover, among others, won’t have the radius prop, but will inherit the radius setting from the theme. The radius prop is also unavailable on most text-based components.

圆角缩放

¥Radius scale

组件中使用的圆角值源自 6 级刻度。

¥Radius values used in the components are derived from a 6-step scale.

虽然你无法直接在特定组件上使用特定步骤（radius 属性仅用于设置圆角因子），但你可以使用圆角比例来设置你自己的组件的样式。

¥While you can’t use a specific step on a particular component directly—the radius prop is used to set just the radius factor—you can use the radius scale to style your own components.

圆角令牌使用 CSS 变量访问。你可以使用这些令牌来设置自定义组件的样式，确保它们与主题的其余部分保持一致。

¥Radius tokens are accessed using CSS variables. You can use these tokens to style your custom components, ensuring they are consistent with the rest of your theme.

/* Radius values that automatically respond to the radius factor */
var(--radius-1);
var(--radius-2);
var(--radius-3);
var(--radius-4);
var(--radius-5);
var(--radius-6);

/* A multiplier that controls the theme radius */
var(--radius-factor);

/*

 * A variable used to calculate a fully rounded radius.

 * Usually used within a CSS `max()` function.
 */
var(--radius-full);

/*

 * A variable used to calculate radius of a thumb element.

 * Usually used within a CSS `max()` function.
 */
var(--radius-thumb);