Angular组件中box-shadow不显示问题排查

你的header阴影不显示的核心原因有两个：

1. 阴影被下方组件覆盖：grid布局中content区域紧挨着header区域，内部div设置height:100%后，和父容器.header（被grid固定为70px高度）完全等高，向下扩散的阴影直接被下方红色的content区域遮挡。
2. 无阴影展示空间：box-shadow默认向外扩展，当div高度与父容器完全一致时，阴影没有额外空间露出，只有缩小div高度时，阴影才会显现未被遮挡的部分。

要实现「包含box-shadow在内总高度为70px」的要求，推荐以下两种方案：

方案1：将阴影移到父容器并调整层级 #

直接把阴影设置在.header容器上，让阴影显示在content上方，同时保持总高度为70px：

修改app.component.scss：

.header {
    grid-area: header;
    background-color: #fff; /* 替换原灰色背景，统一使用白色 */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    z-index: 1; /* 确保阴影显示在content上方 */
}

修改header.component.scss：

div {
    height: 100%;
    /* 移除背景和阴影，让父容器样式生效 */
}

方案2：给父容器预留阴影空间（保留内部div阴影） #

通过给.header添加内边距，为内部div的阴影预留显示空间，同时保证总高度维持70px：

修改app.component.scss：

.header {
    grid-area: header;
    background-color: #777;
    padding-bottom: 8px; /* 为下方阴影预留空间，数值可根据阴影大小调整 */
    box-sizing: border-box; /* 内边距计入总高度，确保grid行高70px不变 */
    z-index: 1;
}

修改header.component.scss：

div {
    background-color: #fff;
    height: 100%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

补充说明 #

如果要求阴影完全包含在70px高度内（不向外扩展），可以使用内阴影（inset）：

div {
    background-color: #fff;
    height: 100%;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3); /* 阴影在元素内部展示 */
}

这种方式阴影不会超出div范围，自然不会被遮挡，且总高度严格为70px。

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