根据父母的边界半径裁剪孩子

Posted 2023-03-28

【中文标题】根据父母的边界半径裁剪孩子

【英文标题】：Cropping children based on parent's border-radius

【发布时间】：2021-10-29 00:56:12

【问题描述】：

在下面的示例 sn-p 中，我尝试对 .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 的最后一个示例中，second 条目必须被裁剪掉，而这根本无法通过border-radius 获得。

我该怎么做呢？

【问题讨论】：

嗯，非常适合我

【参考方案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>

【讨论】：

这似乎工作正常，不需要设置最后一个孩子的边框半径。

事后看来，这是微不足道的......我已经在页面上的其他地方使用了overflow: hidden; 设置，但是......哇，在解决问题时用适当的工具来思考并不容易问题。谢谢！！