← 首页 / 圆角三部曲：一个角的二十年 待审核 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 画一张圆角矩形→用 resvg 烘焙成 PNG（像素精确、老浏览器也认），再用 sliding doors 让两张「门」图随文字宽度滑动、圆角永远贴边；或用 OOCSS 的可复用「角对象」把四张角图嵌进四层 div，套到任意内容上。本页现场生成 SVG 圆角图、演示滑动门的滑动与四角拼贴，并回顾 -moz- / -webkit- 私有前缀的过渡期。

border-radius · 圆角本体

border-radius：一行写四个角

一个 shorthand 背后是 8 个半径：四角 × 水平/垂直。看懂 1~4 值的顺时针展开(TL→TR→BR→BL)、/ 前后分写水平与垂直半径造椭圆角、4 个 longhand、百分比（50%=圆/胶囊）、以及半径之和超过边长时浏览器如何等比收缩所有角。还演示它怎样裁剪 overflow、与 border / box-shadow / outline 的协同——而不改变命中区域与布局。

corner-shape · 圆角之后

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

border-radius 只会画圆弧。corner-shape(CSS Borders L4,Chrome 139+)在同一个半径上换曲线类型：round / squircle / bevel / scoop / notch / square，本质都是 superellipse(<n>) 的取值(round=se(1)、bevel=se(0)、squircle=se(2)、scoop=se(-1)…)。本页用 SVG 实时画出超椭圆角的轮廓（任意浏览器都能看原理），并用真实 CSS 渲染、@supports 探测支持度，演示 Apple 式 squircle 与「票根」凹角。

corner-shape · 造形画廊

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

把 Illustrator「只变形正方形四个角」的造形法搬进浏览器。三种角变形（外側角丸 / 内側角丸 / 面取り）正对 corner-shape 的 round / scoop / bevel；配上每个角各自的 border-radius，就能用单个正方形拼出圆、拱、叶、扇、水滴、四角星、菱形、八边形、房子。本页一个逐角探索器（真实 CSS + SVG 手绘并排）+ 一个全部用 corner-shape 渲染的造形画廊（每个附完整配方）。

番外:边的故事

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

番外 · gradient border

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

原生 border 只接受纯色，border-image 能上渐变却抹平圆角。本页收齐让渐变贴着 border-radius 走的做法：background-clip 双层（padding-box 内芯 + border-box 渐变）、mask + mask-composite: exclude 遮罩环、@property 把 --angle 注册成 <angle> 后用 conic-gradient 让描边旋转，以及无 @property 时「overflow:hidden 裁圆角 + 旋转超大渐变层」的降级。三部曲讲角，这页讲边。

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