答案：通过box-shadow和text-shadow结合transition或@keyframes，可为元素和文字添加动态阴影效果，提升视觉层次与交互感；合理控制阴影强度、动画频率及性能影响，能有效增强UI质感而不损害用户体验。
给元素添加阴影并配合动画，能显著提升页面的视觉层次和交互感。CSS 提供了 box-shadow 用于块级元素阴影，text-shadow 用于文字阴影，结合 @keyframes 和 transition 可实现平滑的动画效果。
box-shadow 设置元素阴影
box-shadow 属性常用于为容器、按钮等元素添加立体感。语法如下：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 inset（可选）;常见用法示例：
- 基础阴影：
box-shadow: 2px 2px 8px rgba(0,0,0,0.3); - 内阴影：
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); - 多层阴影（逗号分隔）：
box-shadow: 0 0 10px red, 0 0 20px blue;
text-shadow 实现文字阴影
text-shadow 让文字更具立体或发光效果。语法与 box-shadow 类似：
立即学习“前端免费学习笔记（深入）”；
text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;实用例子：
- 简单投影：
text-shadow: 1px 1px 2px black; - 发光文字：
text-shadow: 0 0 5px #fff, 0 0 10px #ff0; - 浮雕效果：
text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
结合动画让阴影动起来
通过 transition 或 @keyframes，可以让阴影产生动态变化。
使用 transition 实现悬停动画：
.button {
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
}
.button:hover {
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
使用 keyframes 制作持续呼吸动画：
@keyframes pulse {
0% { box-shadow: 0 0 5px #3498db; }
50% { box-shadow: 0 0 20px #3498db, 0 0 30px #2980b9; }
100% { box-shadow: 0 0 5px #3498db; }
}
.glow {
animation: pulse 2s infinite;
}
实际应用建议
合理使用阴影动画可以增强用户体验，但需注意：
- 避免过度模糊或太强的阴影，防止页面“脏乱”
- 动画频率不宜过高，无限循环动画慎用
- 在暗色背景上使用浅色阴影更明显
- 考虑性能：复杂阴影可能影响渲染效率，尤其在移动端
基本上就这些。掌握 box-shadow、text-shadow 和动画的组合，就能轻松做出有质感的 UI 效果。不复杂但容易忽略细节。
