砌体布局阴影得到剪裁

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>

Answer 2

所以，我决定自己再做一次。我不能接受 Imran 的回答，因为它很棘手，但不是一个好的代码实践。（感谢您对 Imran 的支持，但我从头开始重新构建它。）我发现了一篇由 Tobias Ahlin Bjerrome 撰写的好文章 (https://tobiasahlin.com/blog/masonry-with-css/)，它提供了我需要的所有知识。将 display: inline-block; 更改为 flex 并移除外包装即可解决问题。现在看起来更干净更少了

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 1000px;
  counter-reset: items;
  padding-top: 50px;
}

.item {
  width: 49%;
  margin-bottom: 2%;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0px 30px 60px -30px #757287,
    0px 10px 100px -20px rgba(0, 0, 0, 0.25);
}
@media only screen and (max-width: 700px) {
  .item {
    width: 100%;
  }
  .container {
    display: block;
    height: 100%;
  }
}

<div class="container">
  <div class="item">
     <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">
     <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">
     <h3 class="title">Item 3</h3>
    <div class="content">
      <p>No</p>
    </div>
  </div>
  <div class="item">
     <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">
     <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>

砌体布局阴影得到剪裁

Masonry layout shadow get clipping

html

css

masonry