CSS Battle

这到底是个啥？一个用 CSS 画图的对决游戏

CSS Battle 是一个把 CSS 代码练习变成在线竞技游戏的神奇网站。你不用安装任何软件，打开浏览器就能玩。它的玩法特别简单：网站给出一个目标图形，比如一个小灯泡、一朵花、或者一个旋转的月球，你需要在纯 CSS 里用最少的字符数画出完全一样的图形。提交后系统会自动比对像素，给你打分——得分越高说明你的代码越短、越精确。整个过程像猜谜又像打榜，很适合零基础的朋友用来摸清 CSS 的门路，也适合老手去挖掘那些平时根本用不上的冷门技巧。

新手能玩明白吗？手把手带你走一遍

哪怕你连选择器和盒模型都没搞懂，也完全可以从第一个挑战开始。网站每个挑战都配有一个实时编辑器和预览窗口，你右边写代码左边立刻出图。目标图形会在左上角显示，你照着改 div 的位置、颜色、大小就行。如果卡住了，还可以点开排行榜看看那些高分玩家的最终代码——虽然有些代码像天书，但你可以复制过来慢慢拆解，一点点明白原来 border-radius 能画出弧形，box-shadow 能叠出多层光影。CSS Battle 的编辑器还会自动计算你当前写了多少个字符，帮你随时知道离目标还剩多少空间。整个过程不需要注册也能免费玩基础挑战，注册只是为了保存成绩和参与全球排名。

免费够用吗？Pro 又多了啥？

对于初学者和学生党来说，免费内容已经足够玩好几个月了。网站每天会更新一个「每日目标」挑战，每周还会放出新的「每周挑战」，这些全部免费开放。免费用户能看到自己的排名、回放别人的代码、参与讨论区。唯一限制是免费用户只能查看近期挑战，Pro 会员则能解锁全部历史挑战（上千道题），并且拥有创建私人比赛房间、查看更详细的统计分析等高级功能。Pro 价格也不贵，按月订阅大概一杯奶茶钱，而且你完全可以先白嫖一阵子，等觉得真需要了再升级。另外，浏览器版本纯 CSS，不需要预处理工具，对新手极其友好。

国内能不能直接打开？

可以。CSS Battle 的服务器在海外，但国内网络环境下可以直接访问，注册、提交代码、查看排行榜都没有问题。不需要特殊的网络工具。你只要在浏览器地址栏输入 cssbattle.dev 就行，加载速度也还行。

除了打榜，这些场景也特别好用

如果你是自学前端的在校生，每天花十分钟解一题，几个月下来对 CSS 选择器、伪元素、渐变、动画的理解会远超看教学视频的效果。团队技术分享会上，可以打开某个高分解答，逐步播放他的代码绘制过程，一边看一边讲其中用到的 box-shadow 叠层技巧和伪元素合并思路，同事都能学到新东西。公司招人的时候，让候选人现场做一个 CSS 挑战，比问理论知识更能看出真实动手能力。还有一些技术社群会组织线上实时 Code Battle，大家边打榜边讨论，气氛非常活跃。至于类似的学习网站，CodePen Challenges 更偏向创意展示而非极限精简；100dayscss 是每天一个练习，重在坚持；Codewars 虽然也有 CSS 题目，但更偏向多语言编程，CSS 题目较少。CSS Battle 的独特之处在于把「用最少字符画图」这个目标做到极致，让你在解谜中不知不觉掌握各种 CSS 的「歪门邪道」。

开发团队是谁？

这个项目最早由印度开发者 Kushagra Gour 个人创建，后来在社区帮助下不断迭代。目前团队信息未全面公开，但平台的运营和更新由核心维护者与社区志愿者共同完成。你可以在 GitHub 上找到项目仓库，里面记录了历次挑战的源码和讨论记录。