CSS 与布局 / 圆角三部曲：一个角的二十年 待审核 5 页

圆角三部曲：一个角的二十年

一个圆角,在 CSS 里走了二十年。最早没有任何属性能画弧线 —— 圆角是图片:用 SVG 画圆角矩形、用 resvg 烘焙成 PNG,再靠滑动门(sliding doors)或 OOCSS 的角对象把它贴到可伸缩的盒子上。border-radius(CSS3,约 2010)用一行声明终结了这套切图工程,把圆角变成渲染时画出来的矢量弧。而 2025 年的 corner-shape 又更进一步:border-radius 只能画圆/椭圆弧,corner-shape 把它推广成超椭圆(superellipse)家族 —— squircle、bevel、scoop、notch 全部可达,还能平滑动画。

主线三页按时间线展开,另有两页横向展开:「只改四个角」用同一套参数拼出一整套图形,「渐变描边」讲边而非角。每页一块实时演示区,旁边的 CSS 与 SVG 同步生成。

主线速览: border-radius 之前 —— 切图时代:SVG 转 PNG、滑动门、OOCSS 角对象、私有前缀;border-radius —— 语法(1~4 值、/ 分水平垂直、4 个 longhand、百分比)、半径超界的等比收缩、它如何裁剪 overflow 并收缩命中区域;border-radius 之后 —— corner-shape 与 superellipse:round / squircle / bevel / scoop / notch / square 的统一参数化。在此之上,只改四个角用逐角的半径与形状,把单个正方形拼成圆、叶、星、菱、房子一整套图形。

legacy · 圆角前传

border-radius 之前：圆角是图片

没有 border-radius 的年代圆角是切出来的：SVG 画圆角矩形、烘焙成定尺 PNG，再用 sliding doors 或 OOCSS 的角对象把固定尺寸的图贴到可变宽高的盒子上。

border-radius · 圆角本体

border-radius：一行写四个角

一个 shorthand 背后是 8 个半径：四角各有水平与垂直两个。本页拆 1~4 值的顺时针展开、斜杠分写椭圆角、四个 longhand、百分比基准、半径超界时的等比收缩，以及圆角对裁剪、协同与命中区域的影响。

corner-shape · 圆角之后

border-radius 之后：corner-shape 与超椭圆

border-radius 只画圆弧。corner-shape 在同一个半径上换掉曲线类型，六个关键字都是 superellipse() 的取值；负参数给出的是凸弧的镜像，而非指数小于 1 的曲线。

corner-shape · 造形画廊

只改四个角：把正方形拉成一整套图形

Illustrator 的 Live Corner Widget 三种角变形正对 corner-shape 的 round / scoop / bevel。配上逐角半径，单个正方形即可拼出圆、叶、星、菱与房子。

番外:边的故事

前面几页讲的是角,番外这页讲边,而它最难处依旧是圆角:原生 border 只吃纯色,border-image 能上渐变却无视 border-radius。渐变描边一页收齐让渐变贴着圆角走的全部做法:background-clip 双层、mask-composite 遮罩环、@property + conic-gradient 旋转,及无 @property 时的降级。

番外 · gradient border

渐变描边：让渐变沿着圆角流动

原生 border 只接受纯色，border-image 能上渐变却抹平圆角。本页收齐让渐变贴着 border-radius 走的四种做法，从背景双层与遮罩环到旋转 conic 渐变及其降级。

一条主线:把「形状」从资产里解放出来。 切图时代,改一次圆角半径就要重新出图、重新切;border-radius 让半径成为一个可计算、可继承、可动画的样式值;corner-shape 再让「角的曲率类型」也变成一个连续参数。每一步都在做同一件事 —— 把原本固化在图片资产里的视觉,搬进 CSS 的声明式世界。