用途:当设计需要 Apple/iOS 风格的圆角平滑(常见为 Figma 60% Corner Smoothing)时使用本技能。CSS 的 border-radius 无法表达这种形状,应改为生成平滑路径。
主要能力:根据宽、高、半径和平滑百分比生成 SVG path;可用于 DOM/SVG 的 <path d="...">、CSS 的 clip-path: path("...")、Canvas/WebGL 的 Path2D 或采样超椭圆点。平滑值 0 表示普通圆角,60 作为 Apple/iOS 风格目标值,100 仅用于最大风格化。
使用方式:读取目标宽、高、半径与平滑百分比;能使用 SVG 时渲染 path 并设置 d 属性;必须用 HTML/CSS 时,在浏览器支持与缩放可接受的前提下用 clip-path: path(...),否则在元素前后放置 SVG。半径需钳制到 min(width, height)/2,避免小尺寸或响应式下路径自交。动画平滑时保持宽、高、半径与布局不变,只更新路径;若同时动画文字或数字,使用固定尺寸容器与等宽数字。
适用场景:实现类 squircle 圆角矩形、与 Figma 60% 平滑对齐、在 Canvas/WebGL 中绘制相同形状。
限制:不要用增大 border-radius 冒充平滑;不要用会模糊边缘的 CSS mask;避免一次性路径字符串,应使用可复用函数。clip-path: path() 不支持时需有回退方案。具体可复制代码见 implementation.md,资料未提供其内容。