[分享]css两个盒子之间有阴影

今天我们来谈论一下如何使用CSS在两个盒子之间添加阴影。阴影不仅能够增加页面的层次感，还能够让用户在视觉上更加舒适。 首先，我们需要在HTML中创建两个盒子，如下所示： 这是第一个盒子 这是第...

今天我们来谈论一下如何使用CSS在两个盒子之间添加阴影。阴影不仅能够增加页面的层次感，还能够让用户在视觉上更加舒适。
首先，我们需要在HTML中创建两个盒子，如下所示：

<div class="box1">
  <p>这是第一个盒子</p>
</div>
<br>
<div class="box2">
  <p>这是第二个盒子</p>
</div> 

接下来，我们需要为这两个盒子添加CSS样式。首先，我们需要将两个盒子都设置为定位元素，以便我们能够在它们之间创建阴影。我们还需要将它们的z-index值设置为负数，以便它们位于页面的背景之后。

 .box1,
.box2 {
  position: relative;
  z-index: -1;
} 

然后，我们需要在第一个盒子中创建一个伪元素，用来放置阴影。我们将它的宽度设置为100%，高度设置为60像素，并将它放置在盒子顶部。我们还需要设置其背景颜色和阴影属性：

.box1::before {
  content: ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
} 

接下来，我们需要为第二个盒子创建一个伪元素，用来放置阴影。与第一个盒子类似，我们将它的宽度设置为100%，高度设置为60像素，并将它放置在盒子底部。我们还要将其背景颜色设置为与第一个盒子相同：

.box2::after {
  content: ';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.5);
} 

最后，我们来给两个盒子增加一些样式，使它们更加美观：

.box1 {
  background-color: #f2f2f2;
  padding: 20px;
  margin-bottom: 40px;
}
<br>
.box2 {
  background-color: #f2f2f2;
  padding: 20px;
  margin-top: -60px;
} 

至此，我们就成功的为两个盒子之间创建了阴影。这样一来，我们的页面不再单调，同时也更加具有层次感和美观。