用途:当设计需要 Apple/iOS 风格的圆角平滑(常见为 Figma 60% Corner Smoothing 效果)时,用基于路径的几何实现。单纯 CSS border-radius 无法表达这种形状。
主要能力:按宽度、高度、半径、平滑度生成 SVG path;CSS 组件可用 clip-path: path("..."),否则用内联 SVG;Canvas/WebGL 复用同一组超椭圆采样点作为多边形/路径;将 60% 视为 Apple/iOS 风格目标,smoothing: 0 表示普通圆角。
核心原则:不要用加大 border-radius 来伪造平滑,它改变的是半径而非转角过渡;优先使用路径(SVG path、clip-path: path(...)、Canvas Path2D 或框架矢量路径);半径始终钳制到 min(width, height)/2,避免小尺寸或响应式下路径自交;用户未指定时 Apple/iOS 风格用 smoothing: 60,0% 为普通圆角,100% 仅用于最大风格化;平滑路径只影响绘制/裁剪,不改变宽高、内边距或布局;动画时保持宽高与半径稳定,只更新生成的路径,若同时动画标签或数字,使用固定尺寸容器和等宽数字。
使用方式:读取所需宽、高、半径与平滑百分比;若目标可用 SVG,渲染 <path> 并设置 d 属性;若必须用 HTML/CSS,仅在浏览器支持与缩放可接受时用 clip-path: path(...),否则在元素前后放置 SVG;Apple/iOS 风格默认 smoothing: 60;在小尺寸和最大半径下验证。可复用函数生成路径,避免一次性路径字符串。
常见错误与修正:用 border-radius: 52px 冒充平滑应改为生成平滑路径;半径超过盒子一半应钳制;平滑动画中布局变化应保持布局固定只更新路径;默认用 100% 应改为 60%;使用模糊边缘的 CSS mask 应改用 SVG 路径或干净的矢量裁剪。
检查清单:半径钳制到较短边一半;Apple/iOS 风格默认 smoothing: 60;形状基于路径而非仅 border-radius 近似;平滑变化时宽高与布局不位移;生成路径对正方形和矩形均有效;clip-path: path() 不支持时有回退或可接受行为。
限制:资料未提供具体安装命令、依赖、平台支持范围、收费或价格信息,暂未提供。