我至少每周三次打开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应用时——阴影必须“名副其实”。
适当使用阴影，切勿滥用。
有时候，最好的阴影就是聪明的光线，而非每个区块都堆叠模糊特效。
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
專屬顧問
