避免同级元素的方框阴影相互重叠

Question

我正在尝试在一个普通的父级中有几个形状，并对它们应用阴影。当我这样做的时候，前面同级的阴影会重叠在前面的阴影上。我看了一遍z-index's，但似乎没能算出来。谁能解释一下这里发生了什么，可以做些什么来实现我想要的。

​

* {
      box-sizing: border-box;
    }
    
    html,
    body {
      height: 100%;
    }
    
    body {
      background: #333;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .shape-wrapper {
      opacity: 0.99;
      position: relative;
      width: 400px;
      height: 400px;
      -webkit-perspective: 1000;
    		  perspective: 1000;
      -webkit-transform-style: preserve-3d;
    		  transform-style: preserve-3d;
    }
    .shape-wrapper .shape-inner {
      z-index: 1;
      top: 0;
      left: 0;
      position: absolute;
      -webkit-transform-origin: 50% 50% 0;
    		  transform-origin: 50% 50% 0;
      height: 200px;
      width: 200px;
    }
    .shape-wrapper .shape-inner:nth-child(2) {
      left: 50%;
    }
    .shape-wrapper .shape-inner:nth-child(3) {
      top: 50%;
    }
    .shape-wrapper .shape-inner:nth-child(4) {
      top: 50%;
      left: 50%;
    }
    .shape-wrapper .shape-inner .shape {
      width: 100%;
      height: 100%;
      background: #000;
      border: 1px solid #000;
      box-shadow: 0 0 50px #fff;
    }

 <div class="shape-wrapper">
        <div class="shape-inner">
            <div class="shape shape-1">Shape1</div>
        </div>
        <div class="shape-inner">
            <div class="shape shape-2">Shape2</div>
        </div>
        <div class="shape-inner">
            <div class="shape shape-3">Shape3</div>
        </div>
        <div class="shape-inner">
            <div class="shape shape-4">Shape4</div>
        </div>
    </div>

​

这是我小提琴的link。

How It Is

How I Want

Answer 1

尝试使所有盒子的position: relative和所有盒子上的z-index相等。