Chrome浏览器下CSS Columns实现瀑布流时box-shadow渲染异常如何解决

问题原因 #

你遇到的阴影跨列错位问题由两个因素共同导致：

1. 现有代码给列容器.columns和所有子元素都设置了overflow: hidden，外阴影属于元素盒模型外的绘制内容，会被该属性裁切，跨列边界时就会出现显示异常
2. Chrome浏览器存在多列布局渲染bug：当子元素刚好处于列分界位置时，阴影的绘制范围计算错误，会被渲染到相邻列

可行解决方案 #

方案一：无需修改DOM结构，仅调整CSS

适合不想改动现有HTML结构的场景，通过调整错误属性+强制独立渲染层解决：

.box {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  min-height: 200px;
  margin: 10px;
  /* 新增：强制浏览器将该元素作为独立复合层渲染，避免跨列计算错误 */
  transform: translateZ(0);
}

.columns {
  display: block;
  column-count: 3;
  /* 移除原有错误的overflow:hidden、break-inside属性，容器不需要设置break-inside */
  column-gap: 0; /* 可根据需求调整列间距 */
}

/* 删除原有.columns *全局规则，避免overflow:hidden裁切阴影 */

方案二：少量修改DOM结构，兼容性更高

适合需要兼容低版本浏览器、不想额外增加渲染层开销的场景：

1. 先给每个.box外层套一层独立的包裹容器：

<div class="columns">
  <div class="item-wrapper"><div class="box" style="height: 200px;"> Hey there! </div></div>
  <div class="item-wrapper"><div class="box" style="height: 400px;"> Hey there! </div></div>
  <div class="item-wrapper"><div class="box" style="height: 500px;"> Hey there! 已修复 </div></div>
  <div class="item-wrapper"><div class="box" style="height: 100px;"> Hey there! </div></div>
  <div class="item-wrapper"><div class="box" style="height: 50px;"> Hey there! </div></div>
  <div class="item-wrapper"><div class="box" style="height: 250px;"> Hey there! </div></div>
</div>

2. 调整对应CSS规则：

.box {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  min-height: 200px;
  /* 移除原有margin，改用外层wrapper的padding预留阴影空间 */
}
.columns {
  column-count: 3;
  column-gap: 20px; /* 可按需调整列间距 */
}
.item-wrapper {
  break-inside: avoid;
  /* padding值等于阴影的最大外扩尺寸，给阴影预留足够的显示空间 */
  padding: 10px;
}

如果后续有动态加载、拖拽排序等更复杂的交互需求，也可以搭配轻量JS瀑布流库实现，效果更稳定。

内容的提问来源于stack exchange，提问作者Troublegum