视觉与动效

Smooth Corners

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

smooth-cornerscorner-shapesuperellipsesquirclefigmaiosradiusprogressive-enhancement

快速预览

查看 Smooth Corners 组件的基本效果

正在检查浏览器支持检测 CSS corner-shape 能力。

使用 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>

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

正在检查浏览器支持检测 CSS corner-shape 能力。

基础用法

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

asChild

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

参数 Playground

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

Preview

r=32px / s=0.60

Radius32px

Smoothing0.60

<SmoothCorners
  radius={32}
  smoothing={0.60}
/>

尺寸感知

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

当前渲染: 检测中不支持时会保留原始圆角半径，不影响元素裁切。