分层彩色div不符合预期：底层颜色泄漏问题求助

问题分析 #

你遇到的是父容器（.specialCell）的背景色在子容器（.secondDiv）底部衔接处泄漏的问题，核心原因是全局给所有div设置了border-radius:25px，导致子容器的圆角与父容器的布局产生未被覆盖的缝隙，同时Grid布局的行高分配也让父容器的部分背景区域没有被完全遮挡。

调试与解决步骤 #

• 移除全局div的圆角样式：全局设置border-radius会给所有嵌套div都加上圆角，这是导致缝隙的主要原因。只给需要圆角的容器单独设置样式，避免不必要的圆角干扰。
• 精准控制子容器的圆角：给.secondDiv设置底部圆角，同时去掉顶部圆角，让它完全贴合父容器的底部区域，覆盖父容器背景色。
• 强制裁剪父容器内容：给.specialCell添加overflow:hidden，强制裁剪超出父容器圆角的内容，彻底避免背景泄漏。

修改后的代码 #

CSS部分 #

* {
    box-sizing: border-box;
    font-family: Rubik, sans-serif;
    --blue: hsl(246, 80%, 60%);
    --lightRedWork: hsl(15, 100%, 70%);
    --softBluePlay: hsl(195, 74%, 62%);
    --lightRedStudy: hsl(348, 100%, 68%);
    --limeGreenExercise: hsl(145, 58%, 55%);
    --violetSocial: hsl(264, 64%, 52%);
    --softOrangeSelfCare: hsl(43, 84%, 65%);
    --veryDarkBlue: hsl(226, 43%, 10%);
    --darkBlue: hsl(235, 46%, 20%);
    --desaturatedBlue: hsl(235, 45%, 61%);
    --paleBlue: hsl(236, 100%, 87%);
}

body {
    background-color: darkblue;
}

/* 按需设置圆角，替代全局div样式 */
.mainContainer, .dashboard, .mainSection, .cell, .specialCell, .secondDiv {
    border-radius: 25px;
}

.mainContainer {
    display: grid;
    width: 100vw;
    height: 100vh;
    place-items: center;
}

.dashboard {
    max-width: 800px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.mainSection {
    height: 500px;
    width: 300px;
    display: grid;
    grid-template-rows: 60% 40%;
    grid-row: span 2;
    background-color: #1D214B;
}

.cell {
    background-color: black;
}

.specialCell {
    display: grid;
    grid-template-rows: 20% 80%;
    background-color: hsl(15, 100%, 70%);
    overflow: hidden; /* 强制裁剪内容，避免背景泄漏 */
}

.secondDiv {
    background-color: #1D214B;
    /* 只保留底部圆角，贴合父容器 */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

HTML部分（无需修改） #

<div class="mainContainer">
    <div class="dashboard">
      <div class="mainSection">
      </div>
      <div class="specialCell">
        <div class="firstDiv"> </div>
        <div class="secondDiv">borders?</div>
      </div>
      <div class="cell"> </div>
      <div class="cell"> </div>
      <div class="cell"> </div>
      <div class="cell"> </div>
      <div class="cell"> </div>
      
  </div>
</div>

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