跳转到内容

设计与体验 · DEFINED TERM

Border Radius 圆角

控制元素边角弧度,影响组件边界和整体气质。

你可能会这样说“卡片统一 6px 圆角,按钮不要像胶囊一样到处都是。”

VISUAL EXAMPLE

先看懂它怎么工作

  1. 01定义圆角尺度
  2. 02按组件层级应用
  3. 03在主题中保持一致

MECHANISM

运行机制

  1. 定义圆角尺度
  2. 按组件层级应用
  3. 在主题中保持一致

USE WHEN

适合这样用

卡片、输入框、按钮和弹层

NOT FOR

不要这样理解

不同组件随意使用大量圆角值会显得杂乱

TELL YOUR AGENT

可直接发给 Agent

请按“Border Radius 圆角”的概念处理这个需求:卡片统一 6px 圆角,按钮不要像胶囊一样到处都是。。先说明实现边界,再给出可检查的结果。

ACCEPTANCE

怎么确认它真的做好了

圆角尺度有限且一致,嵌套元素曲率协调,不影响内容空间

OFFICIAL SOURCES

官方来源