避免兄弟元素的盒子阴影相互重叠

Question

我试图在一个普通父母中设置几个形状并对它们应用阴影。当我这样做时，继续兄弟姐妹的影子与之前的影子重叠。我经历了z-index＆＃39;但似乎无法解决这个问题。有人可以解释这里发生的事情以及可以采取哪些措施来实现我想要的目标。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是我小提琴的link。

How It Is

How I Want

Answer 1

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