如何在LESS CSS中创建多个框阴影值

在LESS CSS中创建多个框阴影值可以让我们在同一个元素上应用多重阴影效果，增加视觉层次感和细节表现。这里有一个具体的例子来解释如何操作：

首先，我们定义一个mixin来容纳多个阴影值。使用逗号可以分隔不同的阴影值，以实现多重阴影效果。以下是一个定义多重阴影的mixin示例：

less
.box-shadow(@value) {
  box-shadow: @value;
}

.multi-shadow() {
  .box-shadow(
    0px 1px 3px rgba(0,0,0,0.12),
    0px 1px 2px rgba(0,0,0,0.24)
  );
}

在上面的.multi-shadow() mixin中，我们设置了两个阴影。第一个阴影较浅且较宽，主要用于创建一种轻微的立体感。第二个阴影较深且更集中，用于增强深度感。

然后，我们可以在任何需要的类中使用这个mixin：

less
.my-box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  .multi-shadow();
}

在这个例子中，.my-box类将应用我们定义的.multi-shadow() mixin，使得这个盒子具有双重阴影效果。这种方式非常适用于想要突出元素或者增加页面元素层次感的场景。

通过这种方法，我们可以灵活地为元素添加多重阴影效果，而不需要写重复的CSS代码，使得代码更加整洁和易于维护。