如何用白色填充border-radius在.summary组件间的边角空隙？

问题描述 #

我正在完成Frontend Mentor的前端挑战，目前接近完成，但卡在了样式衔接问题上：在大屏布局（≥600px）下，.summary__details容器的左上角和左下角与.summary__results的圆角衔接处有空隙，需要将这两个边角填充为白色，使整体效果与目标一致。

当前效果：.summary__results的左侧圆角部分透过.summary__details的透明背景显示，导致左上角和左下角出现弧形空隙。
目标效果：.summary__details的左上角和左下角为白色，与.summary__results的圆角自然衔接，整体形成完整的卡片视觉。

相关代码 #

HTML结构 #

<article class="summary">
  <div class="summary__results">
    <h1 class="summary__title">Your Result</h1>
    <div class="summary__score">
      <p class="summary__finalscore">76</p>
      of 100
    </div>
    <p class="summary__descr"><span>Great</span> You scored higher than 65 % of the people who have taken these tests.</p>
  </div>
  <div class="summary__details">
    <p class="summary__subtitle">Summary</p>
    <div class="summary__grades">
      <div class="summary__grade" style="background-color: var(--clr-primary-lightRed-100);">
        <p style="color: var(--clr-primary-lightRed-300);"><img src="assets/images/icon-reaction.svg" alt="itemicon">Reaction</p>
        <p><span>80</span> / 100</p>
      </div>
      <div class="summary__grade" style="background-color: var(--clr-primary-orangeyYellow-300);">
        <p style="color: var(--clr-primary-orangeyYellow-600);"><img src="assets/images/icon-memory.svg" alt="itemicon">Memory</p>
        <p><span>92</span> / 100</p>
      </div>
      <div class="summary__grade" style="background-color: var(--clr-primary-greenTeal-200);">
        <p style="color: var(--clr-primary-greenTeal-400);"><img src="assets/images/icon-verbal.svg" alt="itemicon">Verbal</p>
        <p><span>61</span> / 100</p>
      </div>
      <div class="summary__grade" style="background-color: var(--clr-primary-cobaltBlue-200);">
        <p style="color: var(--clr-primary-cobaltBlue-500);"><img src="assets/images/icon-visual.svg" alt="itemicon">Visual</p>
        <p><span>72</span> / 100</p>
      </div>
    </div>
    <button class="button">Continue</button>
  </div>
</article>

CSS代码（关键修改部分） #

/* 基础样式新增 */
.summary__details {
  padding: var(--content-padding);
  display: grid;
  /* 添加白色背景，填充空隙 */
  background-color: var(--clr-white-100);
}

/* 大屏媒体查询修改 */
@media (min-width: 600px) {
  .summary {
    grid-template-columns: 1fr 1fr;
  }

  .summary__results {
    border-radius: 2rem;
  }

  .summary__details {
    /* 调整圆角为右侧全圆角，左侧直角，保持与.results圆角尺寸一致 */
    border-radius: 0 2rem 2rem 0;
    box-shadow: 10px 10px 15px 5px rgba(0, 0, 0, 0.2);
  }

  .summary__descr {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
}

解决步骤 #

1. 添加白色背景：默认.summary__details背景透明，导致.summary__results的圆角透出，添加background-color: var(--clr-white-100)后，白色背景会填充容器区域，覆盖透出的圆角空隙。
2. 调整圆角设置：将.summary__details的圆角修改为0 2rem 2rem 0，让右侧圆角与.summary__results的圆角尺寸一致，左侧保持直角，与.summary__results的圆角自然衔接，形成完整的卡片视觉。

验证效果 #

修改后，大屏布局下.summary__details的左上角和左下角被白色背景填充，与.summary__results的圆角完美贴合，整体效果与目标一致。

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