概述
据多个技术社区消息，AI浏览器初创公司ego宣布，其开发者CGQAQ为Chromium贡献的CSS shape()函数已正式并入主分支。Chrome 149将于下周向全球用户推送该功能，开发者仅需一行CSS代码，即可实现文本紧贴任意贝塞尔曲线进行环绕排版，从根本上替代了过去依赖JavaScript的布局方案。
十年磨一剑：从shape-outside到shape()
自2014年起，CSS shape-outside属性被写入规范，但过去11年间该属性仅支持圆形、椭圆、矩形 inset、多边形 polygon 以及图片 url 这5种基础形状。对于需要让文字顺着平滑贝塞尔曲线排版的场景，开发者别无选择——只能手算40多个多边形顶点来做粗糙模拟，或者在用户态引入Pretext这类第三方JavaScript文本引擎来绕过浏览器的布局限制。
这些JS方案虽然能实现曲线排版，但本质上是在浏览器渲染层之外另起炉灶，不可避免地带来了额外的性能开销。例如，由前React核心成员、Midjourney工程师Cheng Lou主导开发的Pretext引擎，就是通过绕开DOM、利用Canvas的measureText() API来实现文本测量，其核心逻辑压缩后仅约15KB，却能在500段文本测试中将渲染性能提升超过1200倍。然而，即便是这类高效的JS方案，仍然无法与浏览器渲染引擎的原生性能相提并论。
shape()带来的范式转变
此次shape()函数的引入，让浏览器渲染层直接接管曲线排版能力。开发者只需编写类似以下CSS代码：
.shape-container {
shape-outside: shape(bezier(0, 0, 100, 50, 200, 0));
}
即可让文本自动沿贝塞尔曲线流动，无需任何JavaScript干预。这种原生支持意味着：
- 零第三方依赖：不再需要Pretext等外部库
- 渲染性能最优：浏览器渲染引擎直接计算，无需跨进程通信
- 开发体验简化：一行CSS完成过去需要几十行多边形坐标计算的工作
推动跨端兼容：Interop 2026提案
为推动该功能在所有主流浏览器中落地，ego团队已向Web平台测试项目提交了Interop 2026提案，呼吁Safari和Firefox尽快跟进实现。若该提案通过，开发者将能够在所有现代浏览器中使用一致的shape() API，真正实现"一次编写，处处运行"的曲线文字排版体验。
技术背景与社区影响
CSS Shapes作为Web布局的重要补充，长期以来在艺术设计类网站、电子杂志排版以及创意广告页面中有广泛应用。此前的shape-outside属性虽已获得大多数主流浏览器支持，但复杂的曲线形状一直是其短板。shape()函数的引入填补了这一空白，标志着CSS在创意排版领域迈出了重要一步。
开发者社区对此反应积极。有前端工程师指出，曲线文字环绕是"三十年来Web排版的痛点之一"，而现在浏览器原生支持将彻底改变这一局面。结合Pretext等高性能文本引擎的经验，可以预见，未来Web文本布局将形成"原生渲染层+高性能JS辅助"的混合生态，为复杂排版场景提供更完整的技术解决方案。