设置overflow:hidden后Row的上下box shadow不可见，如何解决？

问题原因 #

overflow:hidden 会裁剪元素边界内（padding-box范围）的所有溢出内容，而默认的 box-shadow 是绘制在元素盒模型的外部，超出了Row的padding-box范围，因此会被直接截断。

可行解决方案 #

1. 外层容器承载阴影 #

给Row套一个外层容器，将box-shadow样式移到外层容器上，Row保留overflow:hidden属性。这样阴影属于外层容器，不会被Row的裁剪规则影响。

示例代码：

<div class="row-container">
  <div class="row">
    <!-- Row内部内容 -->
  </div>
</div>

.row-container {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 -4px 6px rgba(0, 0, 0, 0.1);
  /* 可选：根据布局需求调整margin/padding */
}
.row {
  overflow: hidden;
  /* Row原有的其他样式 */
}

2. 用伪元素模拟外部阴影 #

如果无法添加外层容器，可通过Row的伪元素(::before/::after)绘制阴影，将伪元素定位在Row的外部，避开overflow:hidden的裁剪范围。

示例代码：

.row {
  position: relative;
  overflow: hidden;
  /* Row原有的其他样式 */
}

/* 顶部阴影 */
.row::before {
  content: "";
  position: absolute;
  top: -8px; /* 向上偏移，避开Row的边界 */
  left: 0;
  right: 0;
  height: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: -1; /* 让阴影在Row下方，不遮挡内部内容 */
}

/* 底部阴影 */
.row::after {
  content: "";
  position: absolute;
  bottom: -8px; /* 向下偏移，避开Row的边界 */
  left: 0;
  right: 0;
  height: 8px;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
  z-index: -1;
}

注意：需要根据实际阴影的模糊半径、扩散半径调整伪元素的height和偏移量，确保阴影完整显示。

3. 改用内部阴影（仅适配特定需求） #

如果业务允许使用内部阴影，可以给box-shadow添加inset关键字，让阴影绘制在元素内部，这样就不会被overflow:hidden截断：

.row {
  overflow: hidden;
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 -4px 6px rgba(0, 0, 0, 0.1);
}

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