今天我们来谈论一下如何使用CSS在两个盒子之间添加阴影。阴影不仅能够增加页面的层次感,还能够让用户在视觉上更加舒适。 首先,我们需要在HTML中创建两个盒子,如下所示: <div cla
<div class="box1"> <p>这是第一个盒子</p> </div> <br> <div class="box2"> <p>这是第二个盒子</p> </div>
.box1, .box2 { position: relative; z-index: -1; }
.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); }
.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; }
粉丝
0
关注
0
收藏
0