面试题：CSS中box-shadow属性实现复杂阴影效果

Question

假设要为一个按钮元素创建一个具有立体感且阴影颜色随鼠标悬停变化的效果，使用box - shadow属性来实现，简述思路并写出大致的CSS代码。

Answer 1

思路

1. 首先设置按钮的初始样式，包括基本的形状、背景颜色等。
2. 使用box-shadow属性为按钮添加初始的立体感阴影，通过设置水平偏移、垂直偏移、模糊半径、扩散半径和阴影颜色来实现。
3. 利用:hover伪类，当鼠标悬停在按钮上时，改变box-shadow中的阴影颜色，从而实现阴影颜色随鼠标悬停变化的效果。

CSS代码

button {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  /* 初始的box-shadow，实现立体感 */
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); 
}

button:hover {
  /* 鼠标悬停时改变阴影颜色 */
  box-shadow: 3px 3px 5px rgba(255, 165, 0, 0.3); 
}