Corner Shape Playground

    交互式体验 CSS border-radius 和 corner-shape 属性，探索 Superellipse 等高级圆角效果。

    提示

    请使用 Chrome 139+ 或 Edge 139+ 浏览器查看最佳效果。Firefox 和 Safari 用户可能无法看到 Superellipse 效果。

    预览
    200×200Round
    说明
    Border Radius

    设置元素的圆角半径。可以使用 px 或 % 作为单位。

    Superellipse (N 值)

    Superellipse 是一种数学曲线，通过调整 N 值可以控制角落的形状：

    superellipse(-∞)Notch: 缺口角，带切口的形状
    superellipse(-1)Scoop: 凹角，向内凹陷的形状
    superellipse(0)Bevel: 斜角，使用直线切角
    superellipse(1)Round: 标准圆角
    superellipse(2)Squircle: 方圆形，介于圆形和方形之间
    superellipse(∞)Square: 完全方形

    N 值从 -∞ 到 +∞ 形成连续谱系，涵盖了从缺口到方形的各种角落形状

    浏览器支持： Chrome 139+、 Edge 139+、 Firefox 不支持、Safari 实验性支持
    Border Radius
    单位
    圆角大小16px
    Superellipse
    N = 1
    N 值 (-10 到 10)
    -10-5-1012510
    精确输入
    预设
    生成的 CSS
    /* 元素尺寸：200x200 */
border-radius: 16px;
/* Superellipse: Round */
corner-shape: superellipse(1);