html - masonry 布局阴影得到剪裁

Question

我正在创建一个带阴影的砖石布局。但不幸的是，阴影被剪裁为以下片段。我知道放一些底部填充可以解决这个问题，但是这张卡片的内容可以不时改变，然后高度会根据内容改变。所以这里的问题需要一个纯 CSS 方法来摆脱任何高度和内容大小的底部裁剪。
谢谢

.masonry-cascading-grid-layout {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    
    padding-bottom: 120px; 
    
    .masonry-wrap{
      padding-bottom: 120px; 
    }
  }

  .item-masonry {
    display: inline-block;
    padding: 0em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
    box-shadow: 0px 30px 60px -30px #757287, 0px 10px 100px -20px rgba(0,0,0,.25);//shadow
    
    border-radius: 5px;
  }

    .masonry-cascading-grid-layout {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
    }

<div class="masonry-cascading-grid-layout">
      <div class="masonry-wrap">
                          <div class="item-masonry">
            <h3 class="title">Item 1</h3>
            <div class="content"><p>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit. <br><br> Praesent fringilla orci vitae ligula ultrices finibus a id risus. Praesent sed quam pharetra, pulvinar diam iaculis, condimentum eros. Duis accumsan rutrum aliquam. Donec id quam odio. Pellentesque euismod lectus eget sem luctus dapibus. Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh pretium in.</p></div>
          </div>
                  <div class="item-masonry">
            <h3 class="title">Item 2</h3>
            <div class="content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p></div>
          </div>
                  <div class="item-masonry">
            <h3 class="title">Item 3</h3>
            <div class="content"><p>No</p></div>
          </div>
                  <div class="item-masonry">
            <h3 class="title">Item 4</h3>
            <div class="content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.<br>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit.</p></div>
          </div>
                  <div class="item-masonry">
            <h3 class="title">Item 5</h3>
            <div class="content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p></div>
          </div>
              </div>
    </div>

Answer 1

这种剪裁背后的原因box-shadow是因为父元素。
我终于想出了解决这个问题的方法:
更新:

享受以下代码:

body {
  padding: 3rem 0;
}

.masonry-cascading-grid-layout {
  margin: 1.5em 0;
  padding: 0;
  column-gap: 1.5em;
  position: relative;
}

.item-masonry {
  display: inline-block;
  padding: 0em;
  margin: 0 0 1.5em;
  width: 100%;
  box-sizing: border-box;
  z-index: -1;

  box-shadow: 0px 30px 60px -30px #757287,
    0px 10px 100px -10px rgba(0, 0, 0, 0.25);

  border-radius: 5px;
}

.masonry-cascading-grid-layout {
  column-count: 2;
}

.quick-fix {
  height: 10px;  
  width: 51%;
  position: absolute;
  bottom: -0.5rem;
  left: -0.5rem;
  z-index: 1;
  background: #ccc;
  box-shadow: 0px 0px 28px 28px #ccc;
  filter: blur(8px);
}

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="masonry-cascading-grid-layout">
      <div class="masonry-wrap">
        <div class="item-masonry">
          <h3 class="title">Item 1</h3>
          <div class="content">
            <p>
              Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae
              ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor
              volutpat, at maximus justo pharetra. Donec eros tellus,
              scelerisque at mauris non, mollis mollis velit.
              <br /><br />
              Praesent fringilla orci vitae ligula ultrices finibus a id risus.
              Praesent sed quam pharetra, pulvinar diam iaculis, condimentum
              eros. Duis accumsan rutrum aliquam. Donec id quam odio.
              Pellentesque euismod lectus eget sem luctus dapibus. Vestibulum
              sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci
              varius natoque penatibus et magnis dis parturient montes, nascetur
              ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in
              faucibus. Suspendisse porttitor dapibus vehicula. Vivamus
              scelerisque metus lectus, vel cursus nibh pretium in.
            </p>
          </div>
        </div>
        <div class="item-masonry">
          <h3 class="title">Item 2</h3>
          <div class="content">
            <p>
              Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor
              quam. Orci varius natoque penatibus et magnis dis parturient
              montes, nascetur ridiculus mus. Interdum et malesuada fames ac
              ante ipsum primis in faucibus. Suspendisse porttitor dapibus
              vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on
              pretium in.
            </p>
          </div>
        </div>
        <div class="item-masonry">
          <h3 class="title">Item 3</h3>
          <div class="content"><p>No</p></div>
        </div>
        <div class="item-masonry">
          <h3 class="title">Item 4</h3>
          <div class="content">
            <p>
              Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor
              quam. Orci varius natoque penatibus et magnis dis parturient
              montes, nascetur ridiculus mus. Interdum et malesuada fames ac
              ante ipsum primis in faucibus. Suspendisse porttitor dapibus
              vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on
              pretium in.<br />Ut id cursus ligula, sit amet pharetra nisi.
              Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam
              convallis nibh a tortor volutpat, at maximus justo pharetra. Donec
              eros tellus, scelerisque at mauris non, mollis mollis velit.
            </p>
          </div>
        </div>
        <div class="item-masonry">
          <h3 class="title">Item 5</h3>
          <div class="content">
            <p>
              Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor
              quam. Orci varius natoque penatibus et magnis dis parturient
              montes, nascetur ridiculus mus. Interdum et malesuada fames ac
              ante ipsum primis in faucibus. Suspendisse porttitor dapibus
              vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on
              pretium in.
            </p>
          </div>
        </div>
      </div>

      <!-- Fix to bottom clipper -->
      <div class="quick-fix"></div>
    </div>
  </body>

  <!-- <script src="./script.js"></script> -->
</html>