求助：为Div设置border-radius仅左侧生效的问题排查

你的问题核心在于容器高度塌陷和浮动元素导致的容器宽度未正确撑开，这才让#container的右侧圆角无法正常显示。下面是具体的修复步骤：

1. 清除#container内的浮动 #

你的.list元素都用了float: left，但父容器#container没有做浮动清除处理，这会直接导致容器高度塌陷（高度变为0），border-radius自然无法在四个角正常生效。给#container添加伪元素清除浮动：

#container::after {
  content: "";
  display: table;
  clear: both;
}

2. 让容器自适应内容宽度 #

当前#container是块级元素，默认占满父容器宽度，但浮动的.list元素如果总宽度不足，容器右侧会有空余，再加上overflow: hidden的裁剪，会让右侧圆角看起来"消失"。修改#container的显示方式，让它根据内容自动撑开：

#container {
  margin-left: 20em;
  margin-top: -7em;
  overflow: hidden;
  border-radius: 1em;
  /* 新增以下样式 */
  display: inline-block;
  background-color: #e0e0e0; /* 可选：给容器加背景，让圆角效果更直观 */
}

3. 可选优化：完善阴影样式 #

你的#banner的box-shadow只设置了偏移量，缺少模糊半径和颜色，补全后视觉效果会更自然：

#banner {
  background-color: #404040;
  height: 10em;
  border-radius: 1em;
  box-shadow: -0.1em 0.3em 0.5em rgba(0,0,0,0.3);
}

为什么之前只有左侧圆角生效？ #

因为浮动元素导致#container高度塌陷为0，只有第一个.list元素所在的左侧边缘能显示出圆角，而右侧没有足够的高度和内容支撑圆角的渲染。清除浮动后容器会被内容撑开，四个角的圆角就能正常显示了。

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