前端圈玩彩蛋：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畫什么？企鵝蛋的黑白漸變，還是鴯鹋蛋的墨綠底色？又或者，終于有人提醒他知更鳥蛋的顏色方向畫反了？