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公式？