使用列数时，box-shadow 被截断答案

【问题标题】：box-shadow cut off when using column-count使用列数时，box-shadow 被截断
【发布时间】：2019-05-20 07:39:54
【问题描述】：

我需要从上到下，然后从左到右，例如：

但是，盒子阴影正在被截断。参考 sn-p：item 3 的 box 阴影在底部被切断，item 4 在顶部被切断（在 chrome 中）。

有类似的问题，但答案不适用于这种情况。我不能在带有flex-direction: column 的容器上使用 flex，因为这需要明确的高度，而我的 item 计数是动态的。我也不能像其他答案所建议的那样将项目设置为display: inline-block，因为我需要用 flex 控制这个内容。

.container {
  column-count: 2;
  column-gap: 16px;
  width: 500px;
}

.item {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  margin-bottom: 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  break-inside: avoid-column;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

我从其他类似的 SO 问题中尝试过的另外两件事不起作用：设置 overflow: visible，在具有透明边框的项目周围添加一个包装器。感谢您的任何建议。

【问题讨论】：

标签： css flexbox css-multicolumn-layout

【解决方案1】：

添加display: inline-flex 和width: 100% 属性。 break-inside: avoid-column 属性无效。

.container {
  column-count: 2;
  column-gap: 16px;
  width: 500px;
  margin-top: -2px;
  margin-bottom: -14px;
}

.item {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  margin-top: 2px;
  margin-bottom: 14px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

【讨论】：

这确实修复了 item3 底部的 box-shadow，但 item4 仍然在我的顶部被切断
在 Chrome 上解决此问题的快速方法是为块添加 2px 上边距。
很酷，谢谢。我已将 .item 边距调整为 margin-top: 2px、margin-bottom: 14px 以保持 16px 的总边距，然后在容器上设置 margin-top: -2px 以保持那里的间距。我认为这会起作用，除非我错过了什么！

【解决方案2】：

一个想法是在应用盒子阴影的地方使用伪元素。确保伪元素不跨越所有空间，因此不会受到切割的影响（使用top和bottom不同于0）

.container {
  column-count: 2;
  column-gap: 16px;
  width: 500px;
}

.item {
  border-radius: 3px;
  margin-bottom: 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  break-inside: avoid-column;
  position:relative;
  z-index:0;
}
.item:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:1px;
  bottom:3px;
  left:0;
  right:0;
    box-shadow: 
   0px 3px 1px -2px rgba(0, 0, 0, 0.2), 
   0px 2px 2px 0px rgba(0, 0, 0, 0.14), 
   0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

【讨论】：

有趣的解决方案！