当box-background元素没有给背景颜色时,box-shadow的阴影可以正常显示

<style>
  .box {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .box-shadow {
    box-shadow: 0 5px 10px -5px #00ff00;
  }

  .box-background {

  }
</style>

<div class="box box-shadow">box-shadow</div>
<div class="box box-background">box-background</div>

在这里插入图片描述
当box-background元素给定一个背景色之后,box-shadow的阴影就没有了

<style>
.box {
   height: 100px;
   line-height: 100px;
   text-align: center;
 }

 .box-shadow {
   box-shadow: 0 5px 10px -5px #00ff00;
 }

 .box-background {
    /* 增加一个背景色 */
   background-color: #f5f5f5;
 }
</style>

<div class="box box-shadow">box-shadow</div>
<div class="box box-background">box-background</div>

在这里插入图片描述
第一时间想到的是给box-shadow加一个z-index属性,不过没有效果,最终解决是让box-shadow相对定位

<style>
      .box {
        height: 100px;
        line-height: 100px;
        text-align: center;
      }

      .box-shadow {
        box-shadow: 0 5px 10px -5px #00ff00;
        /* 增加一个定位 */
        position: relative;
      }

      .box-background {
        background-color: #f5f5f5;
      }
    </style>

    <div class="box box-shadow">box-shadow</div>
    <div class="box box-background">box-background</div>

在这里插入图片描述

参考
如何解决box-shadow被紧邻的元素遮住