CSS中border-radius属性无法应用于容器元素的问题求助

你的.container设置了border-radius却看不到圆角效果，核心原因是容器本身没有背景色，内部的.language按钮和下拉菜单的背景色块直接覆盖了容器边缘，且没有被容器的圆角裁剪。

下面是两种可行的解决方式：

方法一：给容器添加溢出裁剪 #

给.container加上overflow: hidden，让内部超出容器圆角的部分被自动裁剪，就能显示出容器的圆角效果：

.container {
  display: inline-block;
  position: relative;
  border-radius: 5px;
  overflow: hidden; /* 新增这一行 */
}

方法二：直接给内部元素设置圆角 #

把圆角属性直接应用到.language和下拉菜单上，分别控制顶部和底部的圆角，避免重复：

.language {
  list-style: none;
  background: #22438C;
  display:inline-block;
  border-radius: 5px 5px 0 0; /* 只保留顶部两个圆角 */
}

ul.dropdown {
  width: 100%;
  background: #22438C;
  position: absolute;
  z-index: 999;
  display: none;
  border-radius: 0 0 5px 5px; /* 只保留底部两个圆角 */
}

两种方法的区别：方法一操作简单，容器统一管控所有内部元素的显示范围；方法二更灵活，能单独调整不同模块的圆角样式，适合需要差异化设计的场景。

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