css - 避免兄弟元素的阴影相互重叠

我正在尝试在一个普通的父级中添加一些形状并将阴影应用于它们。当我这样做时，前进的兄弟姐妹的影子与先前的兄弟姐妹重叠。我经历了z-index的问题，但似乎无法解决。有人可以解释这里发生了什么，可以做什么来实现我想要的。

* {
      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

最佳答案

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