Html 图像未使用圆形图像的完整div空间

我有一个div集作为父对象，它里面有一个

img

标记。将阴影应用到div时，图像没有达到全宽。我尝试过为图像提供z索引，以便弹出一点，但在这种情况下没有帮助

我不明白为什么它适用于方形图像而不是已经圆形的图像

.profile-card\uu img{
宽度：150px；
高度：150像素；
左边距：自动；
右边距：自动；
转化：translateY（-50%）；
边界半径：50%；
溢出：隐藏；
位置：相对位置；
z指数：4；
盒影：0px 5px 50px 0px#6c44fc，0px 0px 0px 7px rgba（107,74,255,0.5）；
}
.profile-card\uuu img img{
显示：块；
宽度：100%；
身高：100%；
对象匹配：覆盖；
边界半径：50%；
}

---

您需要这样的东西吗-

.profile-card\uu img{
宽度：150px；
高度：150像素；
左边距：自动；
右边距：自动；
边缘顶部：20px；
/*边界半径：50%*/
溢出：隐藏；
位置：相对位置；
z指数：4；
盒影：0px 5px 50px 0px#6c44fc，0px 0px 0px 7px rgba（107,74,255,0.5）；
}
.profile-card\uuu img img{
显示：块；
宽度：100%；
身高：100%；
对象匹配：覆盖；
/*边界半径：50%*/
}

这不是一个真正的答案，但我真的不明白你的意思。是图像和边框之间的白色边框像盒子阴影吗？因为正如您所看到的，通过查看下面第一个片段中的红色虚线，图像位于相同的位置，这意味着它们都具有相同的宽度


.container{
位置：相对位置；
}
.红色竖线{
位置：绝对位置；
左：52%；
排名：0；
底部：0；
右边框：1px红色虚线；
z指数：1000；
}
.profile-card\uu img.shadow{
盒影：0px 5px 50px 0px#6c44fc，0px 0px 0px 7px rgba（107,74,255,0.5）；
}
.profile-card\uuuu img.四舍五入，
.profile-card\uuuu img.rounded img{
边界半径：50%；
}
.profile-card\uuu img{
宽度：150px；
高度：150像素；
左边距：自动；
右边距：自动；
溢出：隐藏；
}
.profile-card\uuu img img{
显示：块；
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

请解释你对提问者做了什么，提问者实际上学到了一些东西。是的。但它没有解决我的问题。你能解释一下吗？此外，您还使用了已发布的方形图像。你能使用imgur LINK中给出的那个吗？我想，因为图像也有边界半径。你不使用rgba值的阴影的
边界
或
轮廓
是有原因的吗？没有特别的原因