基于父元素border-radius实现子元素背景圆角适配的问题及解决方法

这个问题我太熟悉了！你踩的坑其实是border-radius继承的本质和元素尺寸不匹配导致的——当父容器的圆角半径（不管是em还是大数值px）超过子元素的高度时，单纯让子元素继承border-radius根本没法让它的边缘完美贴合父容器的圆角曲线，反而会出现奇怪的变形。

为什么原来的方法只在小px时“碰巧”生效？ #

当父容器的border-radius是20px，而最后一个子元素的高度大于20px时，继承的20px圆角刚好能匹配父容器的圆角弧度；但一旦圆角数值超过子元素高度（比如50px，或者2em但子元素高度不足2em），子元素的border-radius会因为自身尺寸限制变成椭圆弧，完全没法贴合父容器的圆角形状。

最实用的解决方案：给父容器加overflow: hidden #

这是最简单、兼容性最好的方法，不管父容器用什么单位、多大的圆角，都能完美解决问题：

.container { 
  display: block; 
  width: 10em; 
  border: 1px solid #999; 
  border-radius: 0 0 2em 0; /* 换成任何单位都没问题 */
  box-shadow: 0.1em 0.1em 0.4em black;
  overflow: hidden; /* 关键属性，让内部内容被父容器圆角裁剪 */
}
.entry:hover { background-color: #aaa; }
/* 不需要再给:last-child加border-radius了！ */

原理很简单：overflow: hidden会让父容器内部的所有内容（包括子元素hover时的背景）都被父容器的圆角边界裁剪，不管子元素本身有没有圆角，都会自动贴合父容器的形状。

进阶方案：用clip-path精准控制（适合特殊场景） #

如果你的父容器不能加overflow: hidden（比如有需要溢出显示的内容），可以用clip-path给最后一个子元素定义和父容器一致的圆角裁剪区域：

.container { 
  display: block; 
  width: 10em; 
  border: 1px solid #999; 
  border-radius: 0 0 2em 0;
  box-shadow: 0.1em 0.1em 0.4em black;
}
.entry:hover { background-color: #aaa; }
.entry:last-child {
  /* 用inset+round模拟父容器的圆角参数 */
  clip-path: inset(0 0 0 0 round 0 0 2em 0);
}

这种方法需要让clip-path的圆角参数和父容器完全同步，如果父容器的圆角有变化，子元素的clip-path也要跟着调整，灵活性不如第一种方法，但能满足特殊场景的需求。

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