新栏目《999 个小技巧，让你 Vibe 的产品更有质感》 ✨ 004 使用递进式圆角数值 + 连续曲率圆角（超椭圆） 001–004 都在我主页，关注我，… · @Kubai087 · TwKit

@Kubai087

新栏目《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".

曝光 671 · 评论 3 · 点赞 19 · 书签 5