box-shadow的颜色渐变技巧

要实现box-shadow的颜色渐变效果，可以使用CSS中的线性渐变属性来定义阴影的颜色。下面是一个示例代码：

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5), 0 0 20px 0 rgba(0, 0, 0, 0.3), 0 0 30px 0 rgba(0, 0, 0, 0.1);
}

在这个例子中，box-shadow属性定义了三个阴影层级，分别对应不同的模糊程度和透明度。通过逐渐减小阴影的透明度，可以实现颜色渐变的效果。

如果需要更加复杂的颜色渐变效果，可以使用CSS的线性渐变属性来定义box-shadow的颜色。例如：

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 #ff0000, 0 0 20px 0 #00ff00, 0 0 30px 0 #0000ff;
}

在这个例子中，box-shadow的颜色使用了红色、绿色和蓝色，分别对应不同的阴影层级。通过逐渐改变颜色值，可以实现更加丰富的颜色渐变效果。