推荐使用伪元素+渐变背景模拟阴影，通过::before或::after设置linear-gradient配合filter: blur()和z-index实现；也可用多层box-shadow叠加形成过渡错觉，适合简单场景；对复杂图形可选drop-shadow()；CSS Paint API为实验性方案。
在CSS中，box-shadow 本身不支持直接使用渐变色，因为它接受的是单一颜色值。但可以通过一些技巧来实现类似“渐变阴影”的视觉效果。以下是几种实用方法。
1. 使用伪元素 + 渐变背景模拟阴影
通过给元素添加一个伪元素（如 ::before 或 ::after），并设置模糊的渐变背景，再配合 transform 和 filter: blur()，可以模拟出渐变阴影的效果。
示例代码：
<div style="position:relative;display:inline-block;padding:20px;background:#fff;"> 渐变阴影盒子 <div style="content:'';position:absolute;left:0;right:0;bottom:-10px;width:100%;height:20px;background:linear-gradient(transparent,rgba(0,0,0,0.6));border-radius:50%;filter:blur(5px);z-index:-1;"></div> </div>
- 伪元素覆盖在原元素下方
- 使用 linear-gradient 创建从透明到深色的渐变
- 通过 filter: blur() 模糊实现阴影扩散感
- z-index: -1 确保在底层显示
2. 利用 box-shadow 多重阴影近似渐变
虽然不能直接渐变，但可以用多个不同颜色和偏移的 box-shadow 叠加，形成颜色过渡的视觉错觉。
立即学习“前端免费学习笔记（深入）”；
示例：
div {
width: 100px;
height: 100px;
background: #fff;
box-shadow:
0 2px 4px rgba(255,0,150,0.2),
0 4px 8px rgba(0,100,200,0.25),
0 8px 16px rgba(0,0,255,0.3);
}
- 多层阴影由浅到深叠加
- 适合短距离颜色过渡
- 性能好，兼容性强
3. 使用 backdrop-filter 或 drop-shadow()（适用于复杂图形）
如果元素有圆角或透明区域，可以结合 filter: drop-shadow() 与外部容器的模糊背景实现更自然的投影。
适用场景：
- 圆形头像、卡片带透明边等
- 配合 SVG 滤镜可实现高级渐变投影
- 注意：drop-shadow 不受 border-radius 影响，能保留形状
4. CSS Paint API（实验性，未来方向）
CSS Houdini 的 paint() 函数允许用 JavaScript 定义绘制逻辑，可实现真正渐变阴影，但目前浏览器支持有限。
background: paint(gradientShadow);
适合高阶开发者探索，生产环境慎用。
基本上就这些常用方式。最推荐的是伪元素+模糊渐变背景，灵活且视觉效果强。根据设计需求选择合适方案即可。
