border-radius 之后：corner-shape 与超椭圆
border-radius 能画的弧，本质都是圆 / 椭圆的一段。想要切角(bevel)、凹角(scoop)、缺口(notch)、或 Apple 图标那种更饱满的「方圆」(squircle)，过去只能回到 clip-path 甚至切图。2025 年的 corner-shape(CSS Borders Level
4)给出统一答案：它不改半径，只在同一个 border-radius 上换掉「这段曲线长什么样」——而所有形态背后是同一个数学对象：超椭圆(superellipse)。
即使浏览器不支持，下方每个演示都配 SVG 手绘预览用路径画出同样的形状，任何浏览器都能看原理。
1 · corner-shape：同一半径，换一种曲线
corner-shape 必须配合非零的 border-radius：半径定义了「角区域」有多大，corner-shape 决定在这块区域里画哪种曲线。左边是真实 CSS 渲染（支持的浏览器），右边是 SVG 手绘预览（处处可见）。拖半径、切形态，或直接用 superellipse() 滑块做连续变形。
radius = 0 时 corner-shape 完全无效。把半径滑到 0，无论选哪种形态，角都是直角——因为没有「角区域」可供作画。corner-shape 改的是这块区域里曲线的凹凸，而区域的大小由 border-radius 决定。两者各管一半，缺一不可。
2 · 超椭圆：一个参数统一六种角
六个关键字其实是同一条 superellipse(s) 曲线在不同 s 上的取值。数学上它是 Lamé 曲线
：指数 n 越大越方，n = 2 是圆，n = 1 是直线（切角）,n < 1 起向内凹。corner-shape 用一个对称参数 s 标定它——
为凸(round / squircle / square),s < 0 为凹(scoop / notch)，并能在任意两值之间平滑动画。下面单画一个角的轮廓，扫 s 看它从缺口一路长到方角。
2.1 · 关键字 ↔ superellipse(s) 映射
| keyword | = superellipse | Lamé 指数 n | 形态 |
|---|---|---|---|
| square | superellipse(∞) | n → ∞ | 直角（看似无圆角，但仍是「角区域」内的极限凸） |
| squircle | superellipse(2) | n = 4 | 比圆更饱满的「方圆」——Apple 图标的轮廓 |
| round | superellipse(1) | n = 2 | 普通圆弧，等同 border-radius 默认 |
| bevel | superellipse(0) | n = 1 | 两切点间的直线切角 |
| scoop | superellipse(-1) | 凹的圆弧 | 向内凹的弧，像被勺子挖一口 |
| notch | superellipse(-∞) | 凹 → ∞ | 90° 向内的方形缺口 |
「border-sharp / corner-sharp」其实就是这套机制的两端。想要尖角 / 切角（把圆角「拉直」）？那是 corner-shape: bevel（直线）或 square（极限直角）；想要向内的尖缺口？是 notch。它们并非独立属性，而是
corner-shape 参数轴上的取值——一个 corner-shape + border-radius 就覆盖了「圆、方、切、凹、缺」整条谱系。
3 · 逐角组合：票根与缺口
和 border-radius 一样，corner-shape 接 1~4 个值（TL→TR→BR→BL 顺时针），也有 corner-top-left-shape 等 longhand 与 corner-top-shape 之类的边 shorthand、以及逻辑属性。让不同角用不同形态，就能拼出票根、缺口卡片等过去要靠
mask / SVG 才能做的造型。
渐进增强：先给降级，再加 corner-shape。corner-shape 目前仍是实验特性（尚未进入 Baseline，部分主流浏览器不支持）。稳妥写法是默认就有一个像样的 border-radius 圆角，再用
@supports (corner-shape: scoop) { … } 把高级形态作为增强叠加——不支持的浏览器退回普通圆角，而非破版。corner-shape 的形状会被 background / border / outline / box-shadow / overflow /
backdrop-filter 一并跟随。
4 · 回到起点
从切图滑动门，到一行 border-radius，再到 corner-shape 把曲率本身变成连续参数——二十年里，「一个圆角」一步步从固化的图片资产变成可计算、可继承、可动画的声明式样式。浏览器替你扛下的，正是这条从像素到数学的路。