只改四个角：把正方形拉成一整套图形
Illustrator 里有个常见技巧：用 Live Corner Widget,只变形正方形的四个角，就能造出圆、叶、星、菱、房子一整套图形。它给角准备了三种变形——外側角丸（往外鼓的圆角）、内側角丸（往里凹的弧）、面取り（切角）。这三者在 CSS
里有对应物：corner-shape 的 round / scoop / bevel。配上每个角各自的 border-radius，浏览器就能原生重现这套「只动角」的造形法——不再需要 clip-path 或切图。
即使浏览器不支持，探索区右侧都用 SVG 手绘同样的轮廓，任何浏览器都能看到结果。
想看这套形状背后的超椭圆数学，见 corner-shape 与超椭圆。
1 · 拖动角手柄：复刻 Live Corner Widget
视频里没有滑块——直接拖正方形角上的手柄（蓝色同心圆）就能改半径，拖动时跟随显示 R 数值;Option / Alt + 点击手柄，则在 round → scoop → bevel 之间切换这个角的类型。下面复刻这套直接操纵的交互：默认四角联动（拖一个，四个一起变），关掉联动即可单独调一个角。虚线框是原始正方形，看它如何被「拉」成各种图形。
手柄沿角平分线（对角线方向）移动：离角越远，半径越大。这正是 border-radius 的几何意义——它量的就是「从角点沿两条边各退多少」。corner-shape 不改这个距离，只换这段弧的凹凸，所以同一个手柄位置，切到 scoop 是凹角、切到 bevel
是直线切角。和造形工坊是同一套数据的两种操纵方式。
单个角能拉到整条边(100%)，四角联动则各封顶 50%。这不是限制，而是 CSS 的真实规则：只有当相邻两角的半径之和超过它们共享的边长时，浏览器才按同一比例等比收缩所有半径。所以关掉联动、单独拉一个角，半径可一路到 100%——这才能做出像视频里那种「一个大圆弧 / 大凹弧扫满整条边」的图形（见画廊里的 扇形、叶形、大凹角）；而四角一起拉时，相邻角各占半条边，每个最多 50%，再拖也会被收缩回去。这条收缩算法正是 border-radius 一行写四个角 那页专门演示的内容。
2 · 造形工坊：四个角各管各的
border-radius 和 corner-shape 都接 1~4 个值（顺时针 TL→TR→BR→BL），也都有逐角 longhand。所以每个角可以独立选曲线类型、拉自己的半径。下面四个面板按空间位置摆放，对应方块的四个角：选 round / scoop / bevel，再把半径从 0 拉满。左侧是真实 CSS 渲染，右侧是 SVG 手绘。或直接点上方预设，一键还原画廊里的造型。
半径为 0 的角永远是直角。corner-shape 改的是「角区域里画哪种曲线」，而区域大小由 border-radius 决定。所以「叶形」= 一对角圆到满(100%)、另一对角半径归零；「房子」=
顶部两角切角(bevel)各吃满半条边、在中线相接成屋顶，底部两角保持直角。哪些角动、动多少、用哪种曲线——这三件事的组合就是整套造形法。
3 · 画廊：只用角变形造出的图形
下面每个图形都是单个正方形，只靠 border-radius + corner-shape 变出来，没有 clip-path、没有 SVG、没有切图。每张卡片下方是它的完整配方——点「造形工坊」里对应的预设可以亲手拉一遍。
画廊用真实 CSS 渲染。若你的浏览器尚不支持 corner-shape,scoop / bevel 会退回普通圆角（round 那几个仍然正确）——这正是它渐进增强的好处：不支持也不破版，只是少了凹角与切角。
4 · 三种角变形 ↔ corner-shape 对照
Illustrator 的三种角变形，和 CSS corner-shape 的关键字一一对应。它们本质是同一条超椭圆曲线的不同取值（详见 corner-shape 与超椭圆），这里只列「叫法 ↔ 效果 ↔ 拉满成什么」。
| Illustrator | corner-shape | 角的样子 | 四角拉满 → |
|---|---|---|---|
| 角丸（外側） | round |
往外鼓的圆弧，等同普通 border-radius |
圆形 |
| 角丸（内側） | scoop |
往盒内凹的弧，像被勺子挖一口 | 四角星(sparkle) |
| 面取り | bevel |
两切点之间的直线切角 | 菱形（切半则为八边形） |
渐进增强：先写 border-radius，再叠 corner-shape。corner-shape 目前仍是实验特性（Chrome 139+，Firefox 与 Safari 均未实现，尚未进入 Baseline；核对于 2026-07）。稳妥做法是默认就给一个像样的圆角，再用
@supports (corner-shape: scoop) { … } 把凹角 / 切角作为增强叠加——不支持的浏览器退回普通圆角，而非破版。角的形状会被 background / border / outline / box-shadow / overflow 一并跟随。
5 · 从「切图」到「拉角」
二十年前，这张 Illustrator 海报上的每个图形，搬到网页都意味着一张图片资产。今天，它们退化成几行声明式 CSS——可计算、可继承、可动画。回到圆角的史前时代看看这段路有多长，或读 corner-shape 背后的超椭圆数学。