css中添加阴影的顺序

在CSS中，我们可以通过添加阴影来使元素更加立体和生动。然而，在添加阴影时，我们需要注意一些顺序上的问题。

.box {
  box-shadow: 2px 2px 3px #999;
} 

在上面的代码中，我们使用了box-shadow属性添加了一个阴影效果。其中，2px表示阴影的水平偏移量，2px表示阴影的垂直偏移量，3px表示阴影的模糊半径，#999表示阴影的颜色。

在实际使用中，我们需要注意阴影的顺序。以一个简单的例子为例：

.box1 {
  box-shadow: 0 0 0 10px #f00;
}
.box2 {
  box-shadow: 0 0 0 10px #0f0;
} 

在上面的代码中，我们分别给两个元素添加了一个类名，并使用box-shadow属性设置了它们的阴影效果。box1元素的阴影颜色为红色，而box2元素的阴影颜色为绿色。

那么，我们来看一下它们的效果：

可以看到，尽管box2元素的阴影颜色为绿色，但是它的阴影还是被box1元素的阴影所覆盖了。这是因为，阴影的绘制是按照元素在HTML文档中的先后顺序进行的。也就是说，元素的阴影是在其后面元素的阴影绘制之前绘制的。

因此，如果我们想要让box2元素的阴影不被box1元素的阴影所覆盖，就需要将它放在box1元素的后面：

这样一来，我们就可以看到box2元素的阴影被完整地显示出来了。

在实际开发中，我们需要根据元素的位置和叠放顺序来合理地设置阴影。只有在正确设置阴影的顺序时，我们才能使元素的阴影效果达到最佳的效果。