产品预览卡片顶部border-radius不显示的修复方案咨询

问题描述 #

为父容器.parent设置了border-radius属性，但顶部圆角未正常显示，怀疑是图片元素遮挡导致。

原因分析 #

父容器的圆角被图片遮挡，是因为默认情况下子元素会超出父容器的圆角范围（父容器overflow属性默认值为visible），图片作为子元素会覆盖父容器的顶部圆角区域。

修复方法 #

方法一：给父容器添加overflow: hidden（推荐） #

这是最简洁的方案，能确保所有子元素都不会超出父容器的圆角边界：

.parent {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  font-family: "Montserrat";
  border-radius: 10px;
  margin: 20px;
  background-color: white;
  overflow: hidden; /* 新增这一行 */
}

方法二：给图片设置顶部圆角 #

如果不想限制所有子元素的溢出，可以单独给图片设置与父容器一致的顶部圆角：

img {
  width: 100%;
  height: 100%;
  border-top-left-radius: 10px; /* 新增 */
  border-top-right-radius: 10px; /* 新增 */
}

注意：如果使用<picture>标签，也可以给picture元素设置这两个圆角属性，效果一致。

修改后的完整CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Fraunces:opsz,wght@9..144,700&family=Rye&family=Seymour+One&family=Ultra&display=swap');
* {
  box-sizing: border-box;
}

body {
  background-color: black;
}

.parent {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  font-family: "Montserrat";
  border-radius: 10px;
  margin: 20px;
  background-color: white;
  overflow: hidden; /* 新增 */
}

picture {
  display: block;
}

img {
  width: 100%;
  height: 100%;
}

.main-content {
  padding: 1rem;
}

.cologne {
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  color: #8f8f8f;
}

h1 {
  font-family: "Fraunces";
  overflow-wrap: break-word;
  color: #343434;
}

.description {
  color: #8f8f8f;
  overflow-wrap: break-word;
}

.price {
  display: flex;
  gap: 1rem;
  align-items: center;
  overflow-wrap: break-word;
}

.price p:nth-child(1) {
  font-size: 2rem;
  font-family: "Fraunces";
  color: #343434;
}

.price p:nth-child(2) {
  text-decoration: line-through;
}

.cart {
  width: 100%;
  padding: 0.5rem 0;
  font-family: inherit;
  color: #343434;
}

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