如何使用CSS设置元素阴影_box-shadow text-shadow结合动画

答案：通过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 效果。不复杂但容易忽略细节。