无法让图像具有正确的边界半径答案

【问题标题】：Cannot get image to have correct border-radius无法让图像具有正确的边界半径
【发布时间】：2020-07-01 04:00:23
【问题描述】：

我有一个带有一些文本覆盖的图像作为菜单。但是，图像没有得到适当的边界半径，我不知道为什么。

我希望图像和叠加层具有像 border-radius: 8px; 这样的圆形边缘，但是我尝试过的所有方法都不起作用。我已经尝试放置!important 并在所有父元素上设置边框半径。

这是 stackblitz 中的代码链接。根据我的研究，这可能与 div 中的图像有关。

（顺便说一句，我使用的是 angular，但我已经简化了 html）

【问题讨论】：

标签： html css

【解决方案1】：

未设置 <img class="groupPic" src="https://i.imgur.com/ZmqcZAx.jpg" [alt]="'Photo of ' + group"> 的填充并为<div class="flexHeader">取消设置margin-top

【讨论】：

谢谢，成功了！所以我正在学习的是，如果你想要图像上的边界半径，那么你不能在边界半径所在的边缘有填充？
@MarcusGallegos 好吧，如果您在图像上设置边框，如border: 1px solid red 并且仍然有填充，您会看到实际应用了边框半径。但是，您将无法看到结果，因为 padding 是弯曲的。 Padding 在边界内，margin 在边界外