CSS Grid区域内侧边栏box-shadow失效问题及解决办法咨询

我之前也碰到过类似的坑！CSS Grid布局下子元素的box-shadow有时候会因为堆叠上下文或者元素溢出限制的问题被隐藏，结合你提供的代码来看，有几个可行的解决思路：

• 提升侧边栏的堆叠层级：你的#content元素有不透明的背景色#e9f2f7，它和#sidebar在Grid布局里默认是同一层级，会把侧边栏右侧的阴影完全挡住。给侧边栏加个z-index就能让它在视觉上靠前：

  #sidebar {
    grid-area: sidebar;
    background: $white;
    box-shadow: 2px 2px 2px black;
    z-index: 1; /* 添加这行，确保侧边栏在内容区之上 */
    padding: 2rem 1rem;
    /* 其他原有样式 */
  }
  

• 改用内部阴影（inset）：如果你的设计允许，把阴影改成内部方向的，这样阴影不会超出元素边界，自然不会被相邻单元格遮挡：

  #sidebar {
    /* 替换原有box-shadow */
    box-shadow: inset -2px 0 2px rgba(0, 0, 0, 0.2);
  }
  

  这种方式适合侧边栏需要左侧阴影的场景，视觉上也能区分侧边栏和内容区。

• 显式声明overflow为visible：虽然元素默认overflow是visible，但有时候框架样式或者父元素的设置会意外覆盖它，导致阴影被裁剪。显式声明确保阴影能溢出元素边界：

  #sidebar {
    overflow: visible;
    box-shadow: 2px 2px 2px black;
    /* 其他原有样式 */
  }
  

• 检查Grid容器的overflow设置：如果你的#wrapper设置了overflow: hidden，那侧边栏的阴影会被容器整体裁剪掉。确保容器没有这个限制：

  #wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "sidebar content";
    height: 100%;
    overflow: visible; /* 确保不是hidden */
    /* 其他原有样式 */
  }
  

补充说明：你提到border-right能正常生效，是因为border属于元素自身的盒模型部分，不会涉及到元素外部的溢出或堆叠层级问题，而box-shadow是绘制在元素边界之外的，所以更容易被相邻元素或容器遮挡。

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