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

Question

我正在尝试在一个共同的父对象中添加一些形状，并为它们应用阴影。当我这样做时，进行中的 sibling 的影子与之前的 sibling 重叠。我浏览了 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为了我的 fiddle 。

How It Is

How I Want

Answer 1

如果您将 box-shadow 放在框的伪元素 (::before) 上，然后在::before 元素上应用 z-index -1，它会起作用。

但它也有缺点。主要是伪元素的父元素必须有可见的溢出。

.shape-wrapper {
   .shape-inner {
      overflow:visible;
   }
   .shape-inner::before {
       content: '';
       box-shadow: 0 0 50px #fff;
       z-index: -1;
       position: absolute;
       top:0;
       left:0;
       right:0;
       bottom:0;
   }
}

https://jsfiddle.net/oqgrb1eu/2/