圆角
Border Radius
初级通用圆角（Border Radius）是让界面元素的角从直角变成弧线的外观属性，可以分别设置四个角。它解决的是卡片、按钮等元素边角太硬、与页面其他元素不协调的问题，例如让后台里的信息卡片统一使用圆角。
你可能会说：「把这些信息卡片的四个角处理得柔和一些，和页面上的按钮保持一致。」
动手看看项目概览卡片
工作台 / 项目概览
拖动四个角的滑块，看项目卡片的外轮廓怎么变。四个值相同时是统一圆角；只改一个角，就能看出不对称的效果。
要点圆角是怎么作用在元素上的？
- 1
半径决定边角弯曲程度
你可以把圆角半径理解为角落弧线的尺寸：数值越大，弯曲越明显。做后台卡片时，给几张卡片使用同一半径，比逐张凭感觉调整更容易保持一致。
- 2
四个角可以分别设置
一个元素不一定四角相同。例如聊天界面的消息气泡，可以让靠近头像的一角更小，其余角更圆。这样形状就能帮助你表达消息从哪一侧发出。
- 3
子元素未必跟着变圆
给卡片设了圆角，卡片里的图片不一定会沿弧线裁切。如果图片铺满卡片顶部，我们还得给图片设置对应的圆角，或让卡片裁切溢出的内容。
容易混淆的地方
圆角改变的是元素边角的形状，不等于边框：没有可见边框，卡片也能有圆角。它也不等于阴影，阴影用明暗表现层次，不能把直角变成弧线。你向 AI 描述「卡片要更圆」时，明确说圆角，比只说「加点层次」更容易得到想要的结果。
什么时候用
适合用
- 做一组后台数据卡片时，用统一的圆角半径，让卡片和页面上的筛选控件看起来属于同一套界面。
- 做搜索框或按钮时，用圆角调整控件轮廓，并通过统一的取值减少同页控件之间的形状差异。
- 做聊天消息气泡时，分别设置四个角，让气泡形状配合左右排列区分消息来源。
不适合用
- 只是想拉开卡片与卡片的距离时，改用间距；圆角只改变边角，不能替你安排元素之间的空间。
- 只是想让卡片从背景中凸显出来时，考虑边框、背景色或阴影；圆角本身不能建立足够的明暗区分。
练一练选一个答案，看看解释
你做了一个带顶部封面图的卡片：卡片外框已经有圆角，但图片的上方两个角仍露出直角。接下来怎样处理更贴近目标？
让 AI 帮你做复制给 AI Agent 直接用
请把后台首页的信息卡片统一设为 12px 圆角，四个角相同。卡片顶部有铺满宽度的封面图，请让图片沿卡片上方两个圆角裁切，避免直角露出；不要改变卡片间距和阴影。