用继承的边框半径解决背景溢出

CSS的一个有趣（但令人烦恼）特性是，子元素的背景可能会溢出父元素的圆角边框。例如，一个包含内部元素的卡片，如果内部元素设置了背景，其背景可能会溢出卡片的边框。

通常解决这个问题最简单的方法是为卡片元素添加overflow: hidden属性。我相信这是大多数人在遇到这种情况时首先想到的解决方案。

但是，这样做会产生一个新问题——卡片元素外部的内容会被裁剪掉——因此无法使用负边距或position: absolute来将子元素的内容移出卡片。

有一种稍微繁琐但更有效的方法可以防止子元素的背景溢出父元素的圆角边框，那就是为子元素添加相同的圆角边框。

最简单的方法是允许子元素继承父元素的圆角边框：

.child {
  border-radius: inherit;
}

如果border-radius简写太冗长，你仍然可以根据情况分别继承四个角的圆角半径：

.child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

或者，对于那些愿意使用逻辑属性的人，这里有等效的代码。（为了更容易理解逻辑属性，将top和left替换为start，将bottom和right替换为end。）

.child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

为什么不直接在卡片上应用背景？

如果.card元素本身包含border-radius并直接设置背景，也能达到相同的效果。那么，为什么不这样做呢？

嗯，有时你做不到。例如，当你的.card元素被分成两部分，只有一部分着色时。

为什么我们应该这样做？

安心可能是最好的理由。至少，你知道你不会在以后使用圆角半径调整方案时创建问题。

当CSS锚点定位获得完全支持时，这种模式将特别有用。我预计这将在1-2年内很快成为弹出式窗口定位的规范。

也就是说，对于弹出式窗口，我个人更倾向于将弹出式窗口内容从文档流中移出，并作为直接子元素放入元素中。通过这样做，当使用锚点定位时，我可以防止overflow: hidden裁剪掉任何弹出式窗口。

以上是用继承的边框半径解决背景溢出的详细内容。更多信息请关注PHP中文网其他相关文章！