前端圈玩彩蛋：1个开发者用CSS画了3年鸭蛋

364像素高、225像素宽，一个椭圆边框加上渐变填充。这是前端开发者凯文·鲍威尔（Kevin Powell）每年复活节的固定节目——纯CSS画彩蛋。从2022年的基础几何图形，到今年直接对标野鸭蛋和知更鸟蛋的配色，这套「代码写生」已经迭代了4个版本。

最狠的是，他连HTML都没改，只调了CSS。

这种操作在技术圈有个黑色幽默的类比：就像厨师每年用同一口锅，但客人以为换了家餐厅。

「蛋形」的数学陷阱：为什么你的椭圆总像气球

CSS画蛋最大的坑不是颜色，是形状。标准椭圆用border-radius: 50%就能实现，但真实鸡蛋底部更宽、顶部更尖。鲍威尔用的参数是border-radius: 100% / 125% 125% 80% 80%——四个值分别控制四个角的曲率，底部80%让弧度收紧，顶部125%则拉得更开。

这个数值组合他用了三年，只在2024年微调过一次比例。代码复用率之高，放在商业项目里足够让产品经理怀疑人生。

尺寸设定也有讲究。aspect-ratio: 3 / 4锁定高宽比，防止容器变形时蛋变成橄榄球。早期版本用固定像素值，今年为了适配更多场景，他在部分变体里改成了相对单位，但核心比例没变。

一个冷知识：禽蛋的「标准高宽比」在自然界是0.72到0.78之间，鲍威尔选的0.75刚好卡在中间值。

这让人怀疑他是不是真的拿游标卡尺量过鸡蛋——或者至少查过鸟类学论文。

阴影的层次感：drop-shadow和box-shadow的「双打配合」

单看渐变填充，蛋像个扁平的色块。鲍威尔加了两个阴影层：外层filter: drop-shadow把阴影投在背景上，制造悬浮感；内层box-shadow: inset则在蛋的右下角压出暗部，模拟光照角度。

参数设置很克制。外阴影是0 0 0.75rem #6b6b6b，模糊半径大但偏移量为零，避免蛋看起来在「飘」；内阴影用-25px -25px 40px rgba(0,0,0,.5)，负偏移意味着光源从左上方打来，暗部集中在右下。

这种「双阴影」技法在UI设计里常见，但用在纯CSS插画上需要反复调试。阴影太重像塑料模型，太轻又失去体积感。鲍威尔今年的野鸭蛋版本把外阴影改成了纯黑black，因为蛋壳本身的明度已经很高，灰色阴影会显脏。

颜色选择上，他坦承用了「创作自由」。

野鸭（Mallard）的蛋实际是偏绿的黄褐色，用取色器从照片提取后「看起来非常苍白」，于是他直接调成了更饱和的柠檬黄到金棕渐变。代码里的四个色值#EED930、#ECFF80、#F6FF65、#BFA51A，没有一个能在真实的野鸭蛋上找到对应。

这算是技术博主的特权：声称「基于实物」，实际按视觉效果任意发挥。

知更鸟蛋蓝：今年唯一「写实」的尝试

相比野鸭蛋的魔改，知更鸟蛋（Robin）的配色更接近真实。鲍威尔用取色器从网络图片提取了四个蓝绿色调，从顶部的浅青#6bc3c7到底部的深墨绿#01373e，跨度足够大但过渡平滑。

这个渐变结构他用了to bottom方向，也就是垂直从上到下。有趣的是，真实知更鸟蛋的颜色分布通常是顶部更深、底部更浅——因为蛋在巢里时，朝上的部分暴露更多光照会褪色。鲍威尔的渐变方向恰好相反，可能是为了符合「光源从上打来」的阴影逻辑，牺牲了生物学准确性。

代码里还藏了个细节：知更鸟蛋版本没有单独设置border-color，继承了默认的深色边框。而野鸭蛋版本同样没改边框，但蛋壳本身的明度高，边框存在感被弱化。这种「不设置也是一种设置」的思路，是CSS老手的典型操作。

文件命名的小心思：为什么叫egg_white而不是white_egg

鲍威尔在文章里专门解释了这个命名。按英语习惯，颜色形容词通常前置（white egg），但他选了后置结构（egg_white）。理由是「让文件更容易找到」——在项目目录里，所有蛋的变体都会按egg_前缀聚集在一起，而不是分散在不同字母顺序下。

这种命名策略在大型代码库里很常见，但很少有人会在一篇教程里特意提及。它暴露了作者的真实身份：不是偶尔写Demo的爱好者，而是被代码维护折磨过的职业开发者。

今年的版本还引入了两个CSS变量：--MainPurple: #7d3b74和--DarkPurple: #1f1d21。但翻遍所有代码片段，这两个变量并没有在蛋的样式里被调用。它们可能是为页面其他元素准备的，也可能是为明年扩展预留的接口——这种「先定义后使用」的习惯，同样指向工程化思维。

从「能跑」到「好看」：前端审美训练的隐藏路径

鲍威尔的CSS彩蛋系列始于2022年，早期版本确实是「蛋形」——几何意义上的椭圆，配色也是简单的纯色填充。2023年开始加入渐变和阴影，今年则直接对标具体物种的蛋壳颜色。这个进化轨迹和技术复杂度无关，纯粹是审美判断的迭代。

一个值得注意的细节：他每年都复用相同的HTML结构，只改CSS。这在技术层面没什么难度，但传递了一个明确信号——样式与结构的分离不是理论口号，是可以持续实践的工作流。

对于正在学习前端的人来说，这种「每年复刻一次」的项目比刷LeetCode更有价值。它强制你面对自己的旧代码，决定哪些该保留、哪些该重写。鲍威尔选择保留HTML和基础形状类，只迭代视觉效果，这种克制本身就是一种设计决策。

今年的野鸭蛋和知更鸟蛋版本，代码量其实比2023年的「复活节彩蛋套装」更少。但他花了更多篇幅解释颜色选择的理由，包括取色器的使用、创作自由的边界、以及为什么某些「写实」尝试失败了。这种从「展示代码」到「展示思考过程」的转变，可能是技术写作更成熟的标志。

最后一个技术细节：高度从364px降到了330px。

野鸭蛋版本的尺寸比基础模板小了约9%，但高宽比保持3:4。鲍威尔没有解释这个调整的原因，可能是为了视觉上的品种区分，也可能是单纯觉得之前的蛋「太大了」。这种没有注释的魔法数字，是只有作者自己能解释的代码债务——或者，明年他会写一篇文章专门说明。

明年复活节，他会用同一套HTML画什么？企鹅蛋的黑白渐变，还是鸸鹋蛋的墨绿底色？又或者，终于有人提醒他知更鸟蛋的颜色方向画反了？