如何解决Div父容器内Header背景无法适配圆角边框的问题？

方法1：给父容器添加overflow: hidden（最简便） #

父容器设置圆角后，子元素的背景会超出圆角范围，给父容器加上overflow: hidden就能强制裁切超出部分，让header的背景完美适配父容器的圆角。

调整后的CSS代码：

.parent{
  border-radius: 20px;
  padding: 12px;
  overflow-wrap: break-word;
  overflow: hidden; /* 新增：裁切超出圆角的内容 */
}
/* 示例：给header设置背景色并适配父容器 */
.header {
  background-color: #e0e0e0; /* 示例背景色，可根据需求修改 */
  padding: 8px;
  margin: -12px -12px 8px -12px; /* 抵消父容器的padding，让header撑满宽度 */
}
.blue{
  background-color: darkslateblue;
  box-shadow: 0 2px 3px rgb(52, 41, 119);
}
.green{
  background-color: darkolivegreen;
  box-shadow: 0 2px 3px rgb(100, 120, 60);
}

方法2：给header设置顶部圆角 #

如果不想用overflow: hidden，可以直接给header设置和父容器一致的顶部圆角，同时调整布局让header宽度匹配父容器：

.parent{
  border-radius: 20px;
  padding: 12px;
  overflow-wrap: break-word;
}
.header {
  background-color: #e0e0e0;
  border-radius: 20px 20px 0 0; /* 顶部圆角与父容器保持一致 */
  padding: 8px;
  width: calc(100% + 24px); /* 加上父容器左右padding总和，撑满宽度 */
  margin: -12px -12px 8px -12px; /* 抵消父容器的padding */
}
.blue{
  background-color: darkslateblue;
  box-shadow: 0 2px 3px rgb(52, 41, 119);
}
.green{
  background-color: darkolivegreen;
  box-shadow: 0 2px 3px rgb(100, 120, 60);
}

方法3：使用CSS clip-path 精准裁切 #

通过clip-path自定义裁切形状，让header的顶部圆角和父容器完全对齐，适合需要精细控制的场景：

.header {
  background-color: #e0e0e0;
  padding: 8px;
  margin: -12px -12px 8px -12px;
  clip-path: inset(0 0 0 0 round 20px); /* 仅保留顶部两个角的圆角 */
}

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