CSS画蛋11年：1个前端用渐变阴影骗过所有人眼睛

364像素高、225像素宽，一个椭圆边框半径写成100%除以四个百分比——这组数字在GitHub上被复制了超过8000次。作者Miriam Suzanne每年复活节前都会更新这套CSS彩蛋代码，今年她选了鸭蛋黄和知更鸟蓝。

前端圈子有个不成文的默契：能用CSS画的图，绝不开PS。不是追求性能，是追求那种"你以为是图片，我按F12给你看"的恶作剧快感。Suzanne的彩蛋系列从2014年做到现在，代码结构几乎没变，变的只有颜色拾取器的目标。

椭圆公式：一个border-radius的障眼法

蛋的基础形状靠一行CSS搞定：border-radius: 100% / 125% 125% 80% 80%。斜杠前的100%是水平半径，后面四个值分别控制左上、右上、右下、左下的垂直曲率。前两个125%把顶部拉宽，后两个80%让底部收窄——数学上的椭圆变成了生物学的蛋形。

Suzanne在注释里写得很诚实：这个结构抄自己去年的文章，只改颜色。但每年还是有几千人点进来，因为渐变的微调比重写结构更需要眼力。她给文件命名时故意把egg_white放在white_egg前面，理由是"按字母排序时更容易找到"。这种产品经理式的文件管理习惯，让她的代码库成了前端教学的经典案例。

真正让蛋"立起来"的是两层阴影的叠加。filter: drop-shadow把阴影投在椭圆外部，制造悬浮感；box-shadow: inset则在内部挖出一个暗角，模拟光线从斜上方打下来的体积感。两层阴影的参数她调了七年：外部阴影用0.75rem的模糊半径，内部阴影固定-25px的偏移量，这个比例关系从2018年沿用至今。

颜色战争：拾取器 vs 肉眼

今年的新色是野鸭蛋黄。Suzanne用Chrome DevTools的拾色器从照片里提取了四组十六进制值：#EED930到#BFA51A的渐变。但渲染出来后她发现"看起来太苍白"——拾色器抓的是像素的中位值，忽略了蛋壳表面的油脂反光。

她的解决方案是"创造性授权"：把最亮的一档从提取的#F0E68C手动改成#F6FF65，一个更偏荧光绿的黄。这个改动没有任何物理依据，但屏幕上的蛋突然有了"新鲜"的感觉。前端配色和摄影后期用的是同一套逻辑：忠于传感器数据还是忠于视网膜印象，Suzanne选了后者。

知更鸟蛋蓝的处理更顺利。这种颜色的学名是Tiffany蓝的野生原型，RGB值落在青绿交界带。她从网上找了十几张鸟巢照片，拾色器抓到的#6bc3c7到#01373e渐变直接可用——蛋壳的钙质层对蓝光的散射比鸭蛋黄更均匀，数字模拟反而更贴近真实。

为什么每年重发同样的代码？

Suzanne在系列开篇埋了个细节：所有文章的结构复制粘贴，只换颜色部分。这种"懒惰"被前端社区当成教学策略——读者可以对比不同年份的diff，看同一个形状如何通过渐变参数改变气质。她的GitHub仓库里，2019年的.egg类和2024年的版本只有三行差别，但Star数每年新增几百。

CSS图形的魅力在于可干预性。一张PNG蛋图只能看，一段CSS蛋图可以拖进DevTools实时改色。Suzanne的代码里留了两个自定义属性占位：--MainPurple和--DarkPurple，今年没被用到，但明年可能派上用场。这种预留接口的习惯，是她从W3C标准工作组带出来的职业病。

她没说的是，这套代码在Safari上有条1像素的渲染误差——底部曲率在Retina屏幕上会轻微锯齿化。这个bug从2017年存在至今，因为"只在放大400%时才可见"，被她标记为wontfix。前端工程师对视觉瑕疵的容忍阈值，往往取决于用户按Command+加号的频率。

今年复活节，她的彩蛋页面新增了Web Share API，允许用户把调好色的蛋直接生成PNG分享。但核心代码仍是那个364×225的椭圆，带着七年前的阴影参数，和一组被手动篡改过色相的鸭蛋黄。如果明年她决定画火烈鸟蛋的珊瑚粉，结构还是同一套——你会期待她继续"抄自己"，还是终于重写那个border-radius公式？