如何在hover更改背景色时保留容器的border-radius圆角效果？

问题的本质是父元素的border-radius默认不会裁剪超出容器边界的子元素内容，最后一个列表项的矩形hover背景会超出父容器圆角范围，从而出现覆盖效果，以下是两种成熟的落地解决方案：

方案1：给父容器添加溢出裁剪（优先推荐） #

仅需给.menu类新增一行overflow: hidden属性，父容器会自动裁剪所有超出圆角范围的子元素内容，无论子元素样式如何调整都不会破坏圆角效果，代码改动最小。
修改后完整CSS代码：

.menu {
  max-width: 200px;
  list-style: none;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 0 0 10px 10px;
  overflow: hidden; /* 新增该行即可 */
}
.menu .menu-item {
  padding: 0.5rem;
  border-bottom: 1px solid #ccc;
}
.menu .menu-item:last-child {
  border-bottom: none;
}
.menu .menu-item:hover {
  background-color: #222;
  color: #fff;
}

该方案兼容性极强，所有现代浏览器均支持，适合绝大多数普通场景。

方案2：单独给最后一个列表项设置匹配圆角 #

如果你的业务场景中父容器不能设置overflow: hidden（比如需要展示超出父容器的下拉箭头、气泡提示等元素），可以单独给最后一个列表项设置和父容器匹配的底部圆角：
新增CSS代码：

.menu .menu-item:last-child:hover {
  /* 圆角值比父容器小1px是为了适配父容器1px的边框，避免出现缝隙，可根据实际边框宽度调整 */
  border-radius: 0 0 9px 9px;
}

该方案灵活度更高，不会影响父容器其他溢出内容的正常显示。

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