免费 · 设计与 CSS
超椭圆圆角生成器(CSS corner-shape).
使用新的 CSS corner-shape 属性生成 iOS 风格的平滑圆角,并为尚不支持的浏览器提供 clip-path 和 SVG 回退方案。
Loading the calculator…
使用方法: 超椭圆圆角生成器(CSS corner-shape)
输入数据或选择文件,调整设置并生成结果。复制或下载之前,请检查结果。
限制与支持格式
输入内容在您的设备上处理。
英语技术说明
corner-shape is new (Chromium first); the clip-path fallback needs a fixed size. Everything is calculated in your browser; nothing you type is uploaded.
corner-shape: superellipse(k) draws |x|^(2^k) + |y|^(2^k) = 1 in each corner (k = 2 is the squircle). The fallback samples the same curve into an SVG path.
A 48 px radius with corner-shape: squircle, plus a 240 × 240 clip-path that draws the same superellipse corners everywhere.