用途:radius-scale 用于为设计系统生成一致的 border-radius 圆角尺度,从直角到胶囊形(pill)。适用于建立新项目的圆角令牌、统一组件圆角、保持按钮/卡片/输入框样式一致,以及构建随元素尺寸变化的圆角体系。
主要能力:可按基准半径(默认 8px)、增长比例(常见 1.5-2)和步数(常见 5-7)生成圆角尺度;支持 px 或 rem 单位;输出 CSS 自定义属性、Tailwind 配置或 JSON 令牌;可选包含 full(9999px)用于胶囊形。内置常见尺度示例,如 Subtle(4px×1.5)、Balanced(8px×2)、Rounded(12px×1.5)、Soft(16px×1.5)。还提供 none/sm/md/lg/xl/2xl/full 的典型值参考,以及按钮、输入框、卡片、模态框、徽章、头像、容器的推荐圆角。
使用方式:设定基准半径、增长比例、步数、单位和输出格式后生成尺度,公式为 value = baseValue * (ratio ^ (step - midpoint)),数值通常取整。可定义语义令牌,如 --radius-button: var(--radius-md)、--radius-card: var(--radius-lg)、--radius-badge: var(--radius-full)。嵌套元素遵循内圆角 = 外圆角 - 边框/内边距,例如 .card-inner { border-radius: calc(var(--radius-lg) - 8px); }。
限制:资料未提供收费、价格、平台支持或性能效果的说明;iOS 风格连续曲率需借助 mask-image 与 SVG 或类似 squircle.js 的库,本技能本身不生成此类曲线。缺失事实暂未提供。