![]()
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畫什么?企鵝蛋的黑白漸變,還是鴯鹋蛋的墨綠底色?又或者,終于有人提醒他知更鳥蛋的顏色方向畫反了?
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.