我至少每周三次打开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应用时——阴影必须“名副其实”。
适当使用阴影，切勿滥用。
有时候，最好的阴影就是聪明的光线，而非每个区块都堆叠模糊特效。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
