新栏目《999 个小技巧,让你 Vibe 的产品更有质感》
✨ 004 使用递进式圆角数值 + 连续曲率圆角(超椭圆)
001–004 都在我主页,关注我,每天一个让产品更有质感的小技巧
👉要点一:等距内缩。当你想让表单、嵌套卡片的各种元素看起来更规整的时候,使用递进式圆角。保证每一层都遵守:
内圆角 = 外圆角 − 间距,内外共用一个圆心
👉要点二:连续圆角/超椭圆。普通圆角接直边的地方有一道折痕,连续圆角过渡更顺(类比 iOS):
border-radius: 32px
corner-shape: superellipse(1.25)
Chrome / Edge 139+ 支持;Safari、Firefox 暂不支持,会自动退回普通圆角。
Prompt 如下,可以直接抄 ⬇️
Make the corner radii in this UI consistent, then switch them to continuous corners. Work on the screen or components I name; ask me if I have not named them. If the project has radius tokens, change those instead of hard-coding values.
Inner radius = outer radius - padding (r = R - p)
Go from the outside in: dialog or card -> panels, inputs, buttons -> chips and tags. A box p inside a container with radius R gets R - p, so both corners share one center. Example: dialog 32, padding 16 -> panels and buttons 16; a chip 8 inside a 16 panel -> 8.
Boxes on the same level share one radius. Never go below 4.
Pills and circles stay fully round.
Keep every padding, gap and radius on a 4px grid.
Continuous corners
Keep border-radius and add the curve as progressive enhancement: @ supports (corner-shape: superellipse(1.25)) { :where(*) { corner-shape: superellipse(1.25); } } Set corner-shape: round on pills and circles.
Chrome and Edge 139+ render it; Safari and Firefox skip the block and show the plain border-radius.
When done, list every radius you changed as "element: old -> new".