设置border-radius后卡片出现白色边角问题求助

我需要制作包含图片和遮罩层的卡片，为其添加了border-radius样式，但同时设置overflow-y: hidden后，卡片边角出现了白色像素问题。最后一张卡片显示正常，我不清楚原因。

我推测问题出在work__preview img元素设置的aspect-ratio与height: 100%属性上，但该设置是必要的——如果去掉，父元素高度会变大，遮罩层会超出图片范围，希望得到解决方法。

问题现象 #

我的代码 #

HTML #

<section class="works">
  <div class="container">
    <div class="works__column">
      <div class="works__work work">
        <div class="work__preview">
          <img class="size" alt="Sports Elements" src="images/works/1.jpg" />
        </div>
        <div class="work__overlay">
          <h3 class="work__title">
            Portier - The ultimate templates & components library.
          </h3>
          <div class="work__icon icon">0</div>
        </div>
      </div>
      <div class="works__work work">
        <div class="work__preview">
          <img class="size" alt="The Coporate" src="images/works/2.jpg" />
        </div>
        <div class="work__overlay">
          <h3 class="work__title">
            The Coporate - Card for Indian Startups
          </h3>
          <div class="work__icon icon">1</div>
        </div>
      </div>
      <div class="works__work work">
        <div class="work__preview">
          <img class="size" alt="App Interface" src="images/works/3.jpg" />
        </div>
        <div class="work__overlay">
          <h3 class="work__title">
            Components Web App Interface
          </h3>
          <div class="work__icon icon">2</div>
        </div>
      </div>
    </div>
  </div>
</section>

CSS #

.container {
  max-width: 80rem;
  padding: 1em;
  margin-inline: auto;
}

.works__column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.size {
  --size: 0;
  width: var(--size);
  height: var(--size);
}

.work {
  display: grid;
  overflow-y: hidden;
  border-radius: .5rem;
}

.work__preview,
.work__overlay {
  grid-area: 1 / 2;
}

.work__preview img {
  --size: 100%;
  object-fit: cover;
  aspect-ratio: 2 / 1.4;
}

.work__overlay {
  align-self: end;
  padding-right: 1rem;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
}

.work__title {
  font-weight: 600;
  line-height: 1.6;
  color: var(--white);
  padding: .5rem 1rem;
  border-start-end-radius: .5rem;
  background-color: var(--steel-gray);
}

.work__icon {
  flex-shrink: 0;
  align-self: center;
  margin-bottom: .125rem;
}

解决方法 #

• 统一圆角设置：给work__preview img添加和.work相同的border-radius: .5rem，确保图片圆角与容器完全匹配，避免因图片边缘溢出产生白边。
• 替换overflow属性：将.work的overflow-y: hidden改为overflow: hidden，全方向的溢出裁剪能更稳定地配合圆角生效，避免仅y方向隐藏导致的裁剪不完整。
• 添加背景色兜底：给.work设置与图片边缘或页面背景一致的background-color，即使出现细微白边也会被背景色覆盖，视觉上消除问题。
• 使用clip-path强制裁剪：给.work添加clip-path: inset(0 round .5rem)，通过路径裁剪强制容器内容符合圆角形状，这是解决浏览器渲染bug的兜底方案。

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