可视化调节各个角的圆角半径,并导出整洁的 CSS border-radius 值。
通过实时角控制和设计系统可靠的 CSS 导出,为按钮、卡片、药丸和有机形状生成精确的边框半径值。
它通过视觉角调整构建标准和椭圆形边框半径语法。
它有助于在组件体系中统一圆角比例,避免界面曲率不一致。
它可以加速徽章、芯片和装饰容器的形状实验,无需手动数学。
所有角上的均匀半径
12px
不对称半径
16px 4px 16px 4px
椭圆半径
24px 8px 24px 8px / 12px 24px 12px 24px
标准输出
border-radius: 16px 4px 16px 4px;
椭圆输出
border-radius: 24px 8px 24px 8px / 12px 24px 12px 24px;
令牌输出
:root { --radius-card: 16px; --radius-pill: 9999px; }响应缩放时角部扭曲
使用标记化半径值并使用真实组件尺寸进行测试。
椭圆语法无效
确保斜杠分隔的水平和垂直值均完整。
药丸形状显得不均匀
通常将圆角设为足够大的值(如 9999px),使其相对于元素高度形成完整胶囊形。
组件曲率不一致
定义共享半径标记并避免临时内联值。
CSS 圆角生成器 应作为交付流程中的快速校验步骤,在提交、发布和交接前都建议执行一次。
什么时候应该使用椭圆边框半径?
当每个角需要独立的水平和垂直曲率时使用椭圆语法。
9999px 对于药丸按钮安全吗?
是的。无论宽度如何,这是全圆形药丸的常见模式。
设计系统应该有多少个半径标记?
大多数团队保留 4-6 个语义级别以平衡灵活性和一致性。
半径值会损害布局吗?
仅在不处理内容剪辑的情况下;与溢出和填充检查相结合。