根据 parent 的 border-radius 裁剪 children

Question

在下面的示例片段中，我尝试对 .container 元素的最后一个 child 施加与 .container 相同的 border-radius，这样当最后一个child 在悬停时突出显示，其背景遵循 parent 的形状。这个似乎在我根据像素设置 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，事情是这样的：

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

因此，我认为 20px 只是我的幸运，并且继承 border-radius 的总体方法试图让 children 遵循形状parent 是错误的。实际上，在 50px 的最后一个示例中，必须将 second 条目裁剪掉，这根本无法通过 border-radius.

获得

我该怎么做呢？

Answer 1

尝试将 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;
}

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

根据 parent 的 border-radius 裁剪 children

Cropping children based on parent's border-radius

html

css

crop

border-radius