根据父级的边界半径裁剪子级

Question

在下面的示例代码片段中，我尝试对.container元素的最后一个子元素施加与 相同的border-radius效果.container，以便当最后一个子元素在悬停时突出显示时，其背景会遵循父元素的形状。在我以像素设置的特定情况下，这似乎工作得很好。border-radius

.container {
  display: block;
  width: 10em;
  border: 1px solid #999;
  border-radius: 0 0 20px 0;
  box-shadow: 0.1em 0.1em 0.4em black;
}

.entry:hover {
  background-color: #aaa;
}

.entry:last-child {
  border-radius: inherit;
}

<div class="container">
  <div class="entry">
  First
  </div>
  <div class="entry">
  second
  </div>
  <div class="entry">
  third
  </div>
</div>

但是，如果我使用ems，例如2em代替20px，事情会像这样中断：

我猜这是因为父级的曲率延伸得比最后一个子级的高度更高。事实上，如果我更改20px为50px我会得到这个：

因此，我认为20px我只是幸运，而border-radius试图让孩子遵循父母的形状的整体继承方法是错误的。事实上，在 的最后一个示例中50px，第二个条目必须被裁剪掉，而这根本无法通过 获得border-radius。

我该怎么办呢？

Answer 1

回答：

使用这个CSS overflow: hidden

OP问题的正确代码：

.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;
}

.entry:last-child {
  border-radius: inherit;
}

<div class="container">
  <div class="entry">
  First
  </div>
  <div class="entry">
  second
  </div>
  <div class="entry">
  third
  </div>
</div>