方框阴影在Css网格砖石效果上被剪裁

Question

我正在尝试解决一个问题，在css网格实现中，长方体阴影样式会被裁剪。最后一张牌的阴影被切掉了，就好像在它之后没有填充一样。

容器“.masonry”上有很大的填充物..。为什么会发生这种情况？参见下面的CSS、HTML和屏幕截图。

​

​

​

.masonary {
  column-width: 33%;
  column-count: 3;
  column-gap: 2em;
}

.masonary div {
  break-inside: avoid-column;
}

.pv5 {
  padding-top: 4rem;
  padding-bottom: 4rem
}

.brick:nth-child(5n+2) {
  border-color: #74398D;
}
.masonary div {
  -webkit-column-break-inside: avoid;
  break-inside: avoid-column;
}
.bg-white {
  background-color: #fff;
}
.w-100 {
  width: 100%;
}
.shadow-6 {
  box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.1);
}
.mb4 {
  margin-bottom: 2rem;
}
.ph4 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.pv3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.w-100 {
  width: 100%;
}
.bw2 {
  border-width: 0.25rem;
}
.br2 {
  border-radius: 0.25rem;
}
.bt {
  border-top-style: solid;
  border-top-width: 1px;
}

<div class="masonary pv5">
  <div class="brick mb4 ph4 pv3 w-100 br2 bg-white bt bw2 shadow-6">
      <h3>Process screening and optimisation</h3>
      <ul class="nl3">
        <li class="">One</li>
        <li class="">Two</li>
        <li class="">Three</li>
        <li class="">Four</li>
        <li class="">Five</li>
      </ul>
  </div>

  <div class="brick mb4 ph4 pv3 w-100 br2 bg-white bt bw2 shadow-6">
      <h3>Title</h3>
      <p>Hello World</p>
      <ul class="nl3">
          <li class="">One</li>
          <li class="">Two</li>
          <li class="">Three</li>
      </ul>
  </div>

  <div class="brick mb4 ph4 pv3 w-100 br2 bg-white bt bw2 shadow-6">
          <h3>Title</h3>
          <p>Hello World</p>
          <ul class="nl3">
              <li class="">One</li>
              <li class="">Two</li>
              <li class="">Three</li>
          </ul>
  </div>

  <div class="brick mb4 ph4 pv3 w-100 br2 bg-white bt bw2 shadow-6">
      <h3>Title</h3>
      <p>Hello World</p>
      <ul class="nl3">
          <li class="">One</li>
          <li class="">Two</li>
          <li class="">Three</li>
      </ul>
  </div>

  <div class="brick mb4 ph4 pv3 w-100 br2 bg-white bt bw2 shadow-6">
      <h3>Title</h3>
      <p>Hello World</p>
      <ul class="nl3">
          <li class="">One</li>
          <li class="">Two</li>
          <li class="">Three</li>
          <li class="">Four</li>
          <li class="">Five</li>
      </ul>
  </div>
</div>

​

Answer 1

长方体阴影正在被裁剪，因为它溢出了父div元素。增加底部填充将解决您的问题。