我至少每周三次打開Leonardo AI網站生成圖片。說實話，他們的UI視覺效果非常出色。

直到你嘗試滾動頁面或打開彈窗時——突然間，連你的電腦都開始變慢。

我在其他幾個網站也注意到了同樣的現象，而它們的共同點就是大量使用了box-shadow。

自然，我打開了開發者工具。

我發現那里是一片陰影的叢林。大陰影、每個元素多個陰影、陰影套陰影，CPU負載比早晨高峰時段的咖啡師還要拼命！

那一刻，我明白了：是時候跟box-shadow說再見了。

為什么box-shadow是性能殺手

說清楚：使用box-shadow并不是罪過。

但它計算成本高，尤其在以下情況：

• 使用大模糊半徑（超過20px后開銷顯著增加）。
• 給數十乃至數百個元素添加陰影。
• 對陰影進行動畫處理（觸發重繪和布局重算）。
• 目標設備為GPU/CPU性能有限的移動端。

其背后發生了什么

• 瀏覽器為元素創建位圖。
• 應用高斯模糊制造柔和效果。
• 將陰影合成到元素背后，動畫或狀態變化時每一幀都要重做。
• 滾動、懸停或動態添加內容時，這些工作會被成倍放大。

想象一下，每頁有50個這樣的操作。這不僅僅是“多一個炫酷樣式”。

這是瀏覽器需要實時繪制、混合、再混合的額外負擔。

真實數據

我在一臺中檔筆記本用Chrome性能面板分析Leonardo AI網站，數據令人震驚：

• 首次內容繪制（FCP）：2.6秒
• 最大內容繪制（LCP）：4.1秒
• 滾動時幀率下降至30 FPS以下，明顯卡頓
• CPU使用率高達90%，僅瀏覽元素網格
• 交互延遲，點擊和彈窗反應遲鈍

替換陰影為更高效的替代方案——細微的底部邊框、模糊偽元素及GPU加速的變換后，性能大幅提升：

• LCP降至1.7秒
• 交互時間（TTI）提升超60%
• 幀率穩定在60 FPS
• 滾動與懸停時CPU使用率下降近50%

布局、內容、樣式意圖完全不變，唯一區別是停止使用box-shadow。

那么有什么替代方案？

你不必放棄美觀，但可以用更聰明的方法替代蠻力：

1. 使用邊框

如果只是想區分卡片和背景，邊框效果出乎意料地好用：

.card {
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom-color: rgba(0, 0, 0, 0.15);
}

優點：開銷小，易覆蓋，不傷GPU。

缺點：效果不夠柔和和沉浸。

2. 漸變和模糊

.card::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 4px;
  right: 4px;
  height: 6px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent);
  filter: blur(2px);
}

優點：視覺類似陰影，不觸發昂貴的重繪或布局。

缺點：需使用絕對定位和偽元素。

3. 用transform代替box-shadow動畫

.card {
  box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* 靜態陰影 */
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
}

優點：transform由GPU加速。

缺點：陰影本身不變，只有元素位置變化，但視覺效果通常足夠。

4. 必須動畫陰影時，謹慎使用will-change

.card {
  will-change: box-shadow;
}

這告訴瀏覽器“我要做重度操作，請提前優化”。

但注意：濫用will-change相當于占用GPU內存，動畫結束后請務必清理。

總結

我依然認為box-shadow是CSS中最具視覺魅力的屬性之一。

但當你關注性能——尤其是移動設備、低端硬件或高密度UI應用時——陰影必須“名副其實”。

適當使用陰影，切勿濫用。

有時候，最好的陰影就是聰明的光線，而非每個區塊都堆疊模糊特效。