他用CSS画了座城：2年、0张图、1个根元素

CodePen上有个项目，点开前以为是普通的前端练习。点开后发现——整张城市插画，没有一张图片，没有SVG，没有JavaScript，甚至连HTML标签都找不到。

作者Alvaro Montoro用纯CSS堆出了一座无限延伸的城市。不是比喻，是真的无限：无论你缩放到1倍、0.5倍还是0.25倍，画面始终填满屏幕，建筑、街道、喷泉、公交站，一层一层向外铺展，没有边界。

2年，一个人， gradients（渐变）的暴力美学

这个项目始于2023年。Montoro的更新节奏像城市本身的生长：今天加一栋楼，下周种几棵树，某个周末突然想做个公交站。他形容自己的答案是"with a lot of patience"——大量耐心，以及更大量的radial（径向）、linear（线性）、conic（圆锥）渐变，连repeating（重复）渐变都没放过。

每个元素都是背景层：大小、位置、颜色停止点，被精确计算到像素级，嵌套在:root这一个根元素里。

这里有个反直觉的选择。现代CSS艺术普遍追求响应式，用vmin或em让画面自适应屏幕。Montoro偏不。他锁死像素单位，因为相对单位会让元素落在0.5像素的位置，边缘发虚，"looks off"。代价是牺牲灵活性，换来的是绝对控制——每一扇窗、每一块砖，都长在他指定的坐标上。

构图逻辑也很特别。他从画面底部中心点开始，向上、向两侧生长。这种"根系式"布局让无限滚动成为可能：背景尺寸和定位经过特殊计算，相同元素循环复用，视觉上形成永无止境的城市肌理。

被注释掉的野心：红绿灯、喷泉、UFO

代码里藏着一些彩蛋。交通灯真的会切换，喷泉的水在流动（虽然作者承认效果"poorly"），部分灯光随机闪烁。这些动画被注释掉了——开发时开着太卡。

Montoro原本还想加更多：一辆会在红灯前停下的汽车，一架需要大幅缩远才能看见的UFO。::before和::after伪元素理论上能承载这些，但性能断崖式下跌，只能搁置。

整个项目的技术边界，卡在浏览器的渲染管线里。

有个更极端的版本设想：完全脱离HTML，纯CSS运行在浏览器中。技术上可行，但需要修改服务器配置，且截至他最后一次测试，只有Firefox支持。这个"无结构"版本没能发布，现有的CodePen演示其实依赖平台自动注入的隐藏HTML骨架。

CSS艺术的悖论：越纯粹，越脆弱

这个项目暴露了纯CSS创作的内在张力。一方面，它证明了CSS的图灵完备性—— gradients叠加到足够复杂度，可以模拟任何位图效果。另一方面，每增加一个伪元素，性能就多一分风险；每追求一分视觉精度，响应式就多一分妥协。

Montoro的选择是明确的：精度优先，动态次之，结构最末。他宁愿让城市成为一幅"可无限缩放的静物"，也不愿为了动画流畅度牺牲像素级的对齐。

项目已经停滞一年。个人原因、工作原因，代码最后一次提交停留在某个未完成的街角。作者说想"expand it into a full city someday"——某天，把它扩展成一座真正的完整城市。

这个"someday"是CSS艺术社区的常见状态。单div创作（single div CSS art）的门槛极高：没有DOM节点可供分层，所有视觉信息必须压缩进一个元素的background属性。能完成复杂作品的开发者，往往也是唯一有能力维护它们的人。

CodePen的1x/0.5x/0.25x按钮是个巧妙的妥协。它不让用户自由缩放，而是提供三个预设档位，确保渐变计算始终在可控范围内。这种"有限自由"是性能与体验的平衡点——Montoro很清楚，完全开放的缩放会让低端设备直接崩溃。

你现在打开这个项目，看到的城市和作者一年前离开时一模一样。红绿灯静止，喷泉凝固，UFO永远悬停在未实现的代码注释里。

但那个无限滚动的背景还在工作。向下拉，向右拉，建筑重复、街道重复、天空重复，像一座真正的大都市——你走得越远，越发现它在自我复制，没有中心，没有尽头。

这种"未完成但已足够"的状态，大概是前端创作最诚实的写照。工具链永远在发展，浏览器支持永远在变化，而某个开发者用两年时间证明：仅凭一个根元素和 gradients的排列组合，就能让像素获得空间感。

如果让你用纯CSS做一件不可能的事，你会锁死哪个技术选择来换取控制力——像素精度，还是响应式弹性？