多重阴影通过CSS的box-shadow和text-shadow属性实现，使用逗号分隔多个阴影，每个可设置不同颜色、偏移和模糊值，如text-shadow: 2px 2px 4px red, -2px -2px 4px blue; 或box-shadow: 0 0 10px red, 0 0 20px green inset, 0 0 30px blue; 可结合rgba透明色、内阴影inset、filter滤镜及动画提升视觉效果。
实现多重阴影颜色效果，主要依靠 CSS 的 box-shadow 属性。这个属性允许你为一个元素添加多个阴影，每个阴影可以有不同的颜色、模糊程度和偏移位置。
基本语法与多阴影写法
box-shadow 支持一次性定义多个阴影，各个阴影之间用逗号分隔。语法如下：
box-shadow: h-offset v-offset blur color, h-offset v-offset blur color, ...;其中：
- h-offset：水平偏移，正数向右，负数向左
- v-offset：垂直偏移，正数向下，负数向上
- blur：模糊半径，值越大越模糊
- color：阴影颜色
示例：文字多重阴影
如果你想让文字有多种颜色的投影，可以用 text-shadow 实现类似效果：
立即学习“前端免费学习笔记（深入）”；
.glow-text {
text-shadow: 2px 2px 4px red,
-2px -2px 4px blue,
0 0 8px yellow;
}
这样文字会同时拥有红色、蓝色和黄色的多重发光阴影，营造出炫彩效果。
示例：盒子多重阴影
给一个 div 添加彩色外阴影和内阴影：
.fancy-box {width: 100px;
height: 100px;
background: white;
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5),
0 0 20px rgba(0, 255, 0, 0.4) inset,
0 0 30px rgba(0, 0, 255, 0.3);
}
说明：
- 第一个阴影是红色外发光
- 第二个带 inset 是绿色内阴影
- 第三个是蓝色外发光，范围更大
实用技巧
要做出更丰富的视觉效果，可以：
- 混合使用 rgba 或 hsla 颜色，让阴影更通透
- 叠加多个小偏移阴影模拟光晕或描边
- 结合 filter: drop-shadow() 用于复杂图形（如PNG图标）
- 用动画改变某个阴影的偏移或模糊值，实现动态发光效果
