PasteZap
🌐 简体中文
免费 · 无需注册

免费 · 设计与 CSS

超椭圆圆角生成器(CSS corner-shape).

使用新的 CSS corner-shape 属性生成 iOS 风格的平滑圆角,并为尚不支持的浏览器提供 clip-path 和 SVG 回退方案。

开始之前

部分技术控件使用英语。支持 Unicode 文本;文件格式和输出语言取决于具体工具。

下面以英语列出技术限制。处理大型文件或使用结果之前,请先查看这些限制。

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.