面试题：使用box-shadow和text-shadow实现复杂的立体效果

Question

假设要为一个网页中的卡片元素创建一个具有立体效果的外观，卡片需要有层次感的投影，文字部分也需要相应的阴影来增强立体感。请描述实现该效果的思路，并写出关键的CSS代码片段，需同时运用box-shadow和text-shadow属性。

Answer 1

实现思路

1. 对于卡片元素，使用box-shadow属性创建多层次的投影来模拟立体效果。通过设置不同的偏移量、模糊半径和颜色，让投影有层次感。
2. 对于卡片内的文字，使用text-shadow属性添加阴影，同样通过设置合适的偏移量、模糊半径和颜色来增强文字的立体感，且与卡片的投影风格相呼应。

关键CSS代码片段

.card {
  background-color: white;
  padding: 20px;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card h1 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.card:hover {
  box-shadow: 
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
}

上述代码中，.card类代表卡片元素，通过box-shadow设置了初始的两层投影，card h1选择器针对卡片内的标题文字设置了text-shadow，并且.card:hover伪类在鼠标悬停时改变卡片的box-shadow，提供一种交互的立体效果增强。