万维网几十年来的方盒子布局霸权，终于要终结了。一批新的 CSS 特性——包括 shape() 函数，以及 border-shape、corner-shape 属性——给网页设计师和他们的 AI 助手提供了更丰富的布局调色板，让内容排布更流畅、更自由。
1996 年 W3C 发布首个网页布局标准时，网站模仿的是学术论文、报纸和杂志的网格布局。当时显卡和浏览器渲染引擎都很初级，开发者面对新媒体，发现把文字流动限制在尽量简单的几何坐标里最容易实现。
但现在不一样了：纸质印刷基本死去，Web 开发者更老练（不行的还有 AI 帮忙），GPU 也强大了无数倍——没有理由网页还得是四四方方的。1884 年科幻小说《平面国》里，生活在二维平面的主角骤然面对三维世界的眩晕感，Web 开发者第一次用上这些新 CSS 结构时，大概也会有类似感受。
最初的 HTML 和 CSS 只能在页面上画横线、竖线或矩形边框，更花哨的布局要靠 Java Applet、Flash 之类专有插件，或者繁琐的 JavaScript hack。SVG 第一次打破了这种方盒子：用一串数字坐标描述曲线、波浪线、Logo 或任何想要的形状，但 SVG 只能用在页面上的画布里，页面布局本身仍归 CSS 管。
第一次打通两个世界的是 path()，它允许把 SVG 直接嵌进 CSS，但局限明显：不能响应页面尺寸变化，不认识变量和 CSS 单位，开发者只能把一切都写成像素。shape() 函数才真正把更丰富的设计带给 Web：它同样是一组几何坐标，但构建在响应式的 CSS 语法之上，与已有的 clip-path 结合，可以做出票根、聊天气泡等各种形状。
最新的 border-shape 属性则补齐了最后一块：把 shape() 定义的 CSS 原生坐标直接应用到网页边框上。坐标在渲染早期就确定边界，而不是在渲染快结束时才裁剪。正如自称 CSS 极客的开发者所说：给 CSS 形状加边框将变成小菜一碟。
苏公网安备32021302001419号