QiuYe UI
特效

Smooth Corners

Figma/iOS 风格平滑圆角组件：基于 CSS corner-shape 的渐进增强方案，将 radius + smoothing 转换为补偿半径和 superellipse，并在不支持的浏览器中自动回退到标准 border-radius。

smooth-cornerscorner-shapesuperellipsesquirclefigmaiosradiusprogressive-enhancement

快速预览

查看 Smooth Corners 组件的基本效果

普通圆角未使用平滑
smoothing0.6
smoothing0.95

基本用法

使用 Smooth Corners 组件的基础示例

导入组件

1import { SmoothCorners } from "@/components/qiuye-ui/smooth-corners";

使用组件

1<SmoothCorners
2  radius={28}
3  smoothing={0.7}
4  className="bg-primary p-6 text-primary-foreground"
5>
6  Smooth corner card
7</SmoothCorners>

组件演示

查看组件的各种使用方式和效果

基础用法

使用 radius 与 smoothing 参数生成 Figma/iOS 风格的连续圆角。

圆弧
smoothing 0
默认
smoothing 0.6
更平滑
smoothing 0.95

asChild

将平滑圆角直接应用到已有元素，避免额外包裹层。

参数 Playground

拖动滑块实时调整圆角半径和平滑强度。

Preview
r=32px / s=0.60
Radius32px
Smoothing0.60
<SmoothCorners
  radius={32}
  smoothing={0.60}
/>

尺寸感知

开启 observeSize 后，大圆角会根据元素尺寸自动压缩 smoothing。

corner-shape: 检测中不支持时会自动回退到原始 border-radius。