basic-shape · 值类型

<basic-shape>:CSS 的八个形状函数

path 微语言能描述任意形状，但写一个圆角矩形也要拼出一串 A 弧命令。CSS 把常用形状做成了现成的函数，统称 <basic-shape>——这是一种独立的值类型，不属于任何单个属性：clip-path、shape-outside、offset-path 接受的都是它。本页全部交给 clip-path 来观察：形状内保留、形状外裁掉（露出棋盘格）。

1 · 逐个演示

图 1-1 · 八个 basic-shape 函数的逐个演示。可切换函数并调参数，观察同一个盒子上各形状的裁切结果。

这些函数原生支持百分比。坐标 / 半径都能写 %（相对参照盒），盒子缩放形状跟着缩放——这正是 path() 做不到的，它只认无单位 px，盒子变宽时形状不会跟着变。圆/椭圆还有四个关键字半径：closest-side / farthest-side / closest-corner / farthest-corner。

2 · 八个函数速查（含本浏览器实测）

图 2-1 · 各形状函数在当前浏览器的实测支持情况。

三种矩形的差异。inset() 说「从四条边往里缩多少」，rect() 说「四条边各落在哪」（top/bottom 从上边量，left/right 从左边量，沿用早期 clip 属性的语义）,xywh() 说「左上角 + 宽高」（与 viewBox 同一约定）。三者都支持 round <radius> 圆角，表达力等价，按习惯选择即可。

polygon() 的圆角顶点还在草案。CSS Shapes Level 1 的编辑草案给 polygon() 也加了 round <length>（写在 fill-rule 之后、顶点列表之前，为每个顶点统一倒角），好处是圆角能用在所有接受 <basic-shape> 的属性上。但目前没有任何浏览器实现（兼容性据 MDN BCD，核对于 2026-08）——round 关键字现阶段只有 inset() / rect() 这类矩形支持。想给多边形做圆角，当前要么改用更多顶点逼近，要么走 shape() 的弧线命令，或叠一层 border-radius。