html - 无法让图像具有正确的边界半径

Question

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

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

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

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

https://stackblitz.com/edit/ng-mat-beta-12-fzsfeh?embed=1&file=app/app.component.html

标签： htmlcss

Answer 1

未设置填充<img class="groupPic" src="https://i.imgur.com/ZmqcZAx.jpg" [alt]="'Photo of ' + group"> 和未设置边距顶部<div class="flexHeader">

在此处输入图像描述