只改四个角：把正方形拉成一整套图形
Illustrator 的 Live Corner Widget 只变形正方形的四个角，就能造出圆、叶、星、菱、房子一整套图形。它给角准备了三种变形：往外鼓的圆角（外側角丸）、往里凹的弧（内側角丸）、切角（面取り）。这三者在 CSS 里各有对应物，即 corner-shape 的 round / scoop /
bevel。配上每个角各自的 border-radius，浏览器就能原生重现这套只动角的造形法，不再需要 clip-path 或切图。
§1 与 §2 的探索区右侧都用 SVG 手绘同样的轮廓，不支持 corner-shape 的浏览器也能看到结果。这套形状背后的超椭圆数学见 corner-shape 与超椭圆。
1 · 角手柄的直接操纵
Live Corner Widget 的交互没有滑块：直接拖正方形角上的手柄就能改半径，Option 或 Alt 加点击手柄则在 round、scoop、bevel 之间切换这个角的类型。
Option 或 Alt 加点击换角的类型。注 · 手柄沿角平分线移动，离角越远半径越大，这就是 border-radius 的几何意义——它量的是从角点沿两条边各退多少。corner-shape 不改这个距离，只换这段弧的凹凸，所以同一个手柄位置，切到 scoop 是凹角、切到 bevel 是直线切角。
建议 · 单个角能拉到整条边（100%），四角联动则各封顶 50%。这不是 lab 的限制而是 CSS 的规则：只有当相邻两角的半径之和超过它们共享的边长时，浏览器才按同一比例等比收缩所有半径（见
border-radius 一页 §3）。所以关掉联动、单独拉一个角，半径可一路到 100%，这才能做出「一个大圆弧或大凹弧扫满整条边」的图形（画廊里的扇形、叶形、大凹角）；四角一起拉时相邻角各占半条边，每个最多 50%。
corner-shape 另有一条 border-radius 本身没有的约束：当对角两个角的半径与形状会让它们互相重叠时，浏览器同样会压掉取值。border-radius: 80% 20px 配 corner-shape: scoop 就会触发它，第一个分量被调小 [1]。本页 lab 的 SVG
侧只实现了四条边的相邻约束，未实现这条对角约束，所以在大半径 scoop 的对角组合下，左侧真实 CSS 与右侧手绘可能分叉。
2 · 逐角独立的造形工坊
border-radius 和 corner-shape 都接 1~4 个值（顺时针 TL → TR → BR → BL），也都有逐角 longhand，所以每个角可以独立选曲线类型、拉自己的半径。
注 · 半径为 0 的角永远是直角，因为 corner-shape 改的是角区域里画哪种曲线，而区域大小由
border-radius 决定。所以叶形是一对角圆到满（100%）、另一对角半径归零；房子是顶部两角切角各吃满半条边、在中线相接成屋顶，底部两角保持直角。哪些角动、动多少、用哪种曲线，这三件事的组合就是整套造形法。
3 · 只用角变形造出的图形
画廊里每个图形都是单个正方形，只靠 border-radius 与 corner-shape 变出来，没有 clip-path、没有 SVG、没有切图。
corner-shape 时 scoop 与 bevel 会退回普通圆角，round 那几个仍然正确。4 · 三种角变形与 corner-shape 的对应
Illustrator 的三种角变形与 CSS corner-shape 的关键字一一对应，本质是同一条超椭圆曲线的不同取值（见 corner-shape 与超椭圆）。
| Illustrator | corner-shape |
角的样子 | 四角同时拉到 50% |
|---|---|---|---|
| 角丸（外側） | round |
往外鼓的圆弧，等同普通 border-radius |
圆形 |
| 角丸（内側） | scoop |
往盒内凹的弧 | 四角星 |
| 面取り | bevel |
两切点之间的直线切角 | 菱形；半径改取 25% 则是八边形 |
警示 · corner-shape 仍是实验特性，仅 Chromium 139+（2025-08）落地，Firefox 与 Safari 均未实现，尚未进入 Baseline（兼容性据 MDN BCD，核对于 2026-08）。稳妥做法是默认就给一个像样的 border-radius 圆角，再用
@supports (corner-shape: scoop) { … } 把凹角与切角作为增强叠加，不支持的浏览器退回普通圆角而非破版。
二十年前这一整套图形搬到网页都意味着图片资产，今天它们收敛成几行声明式 CSS，可计算、可继承、可动画。圆角的史前时代一页记录了这段路的起点。
5 · 参考文献
- MDN Web Docs.
corner-shape，§Constraining opposite corner shape radii. Mozilla. - Bos, B., et al. (Eds.). CSS Backgrounds and Borders Module Level 3, §4.5 Overlapping Curves. W3C.