Html 如何裁剪css中的圆形图像

我需要使个人资料图像的角落应该是模糊的边界。但在我的代码中，我无法准确地得到

我需要的结果应该是这样的：

但我的代码，模糊边界是重复它自己。因为，非模糊图像也有相同的角点。似乎拐角处又出现了

effet{
宽度：400px；
高度：125px；
保证金：0自动50px自动；
}
.配置文件框{
宽度：150px；
高度：150像素；
左边距：40px；
边界：没有！重要；
填充：19.5px10px；
显示：块；
}
.min_cir{
边界半径：50%；
边界半径：50%；
位置：绝对位置；
排名：0；
}
.filter--r{
-webkit遮罩：-webkit径向梯度（中心，最近侧，透明30%，黑色80%）；
-webkit遮罩：径向渐变（中心最近侧，透明50%，黑色110%）；
-webkit过滤器：模糊（2px）；
掩码：url（“#掩码径向”）；
过滤器：模糊（2px）；
转换：比例（1.1）；
位置：绝对位置；
排名：0；
}

---

您可以给出以下方法：

首先删除缩放，因为它将像重复图像一样显示

然后将第二个图像放在另一个div中，并根据示例给出以下css。在示例中，div是

imgDiv

第二幅图像的父div，即

imgDiv

是

overflow:hidden

并给出left和top值，给出height和width is（图像div-50px（如果需要15px模糊））执行此技巧

并给出两幅图像相同的高度和宽度。在这里，我给出了与原始图像相同的大小

effet{
宽度：400px；
高度：125px；
保证金：0自动50px自动；
}
.配置文件框{
宽度：150px；
高度：150像素；
左边距：40px；
边界：没有！重要；
填充：19.5px10px；
显示：块；
}
.min_cir{
边界半径：50%；
边界半径：50%；
位置：绝对位置；
顶部：-20px；
左：-20px；
}
.filter--r{
-webkit遮罩：-webkit径向梯度（中心，最近侧，透明30%，黑色80%）；
-webkit遮罩：径向渐变（中心最近侧，透明50%，黑色110%）；
-webkit过滤器：模糊（4px）；
掩码：url（“#掩码径向”）；
过滤器：模糊（4px）；
位置：绝对位置；
排名：0；
左：0；
}
伊姆格迪夫先生{
边界半径：50%；
高度：266px；
左：20px；
溢出：隐藏；
位置：绝对位置；
顶部：20px；
宽度：660px；
}
img{
宽度：700px；
高度：306px；
}

scale（）方法增加或减少元素的大小（根据给定的宽度和高度参数）。我认为，通过对scale（）方法使用不同的垂直和水平参数，可以获得所需的结果。当前，宽度和高度应用1.1幅值。这适用于形状为正方形（宽度和高度相等）而图像为矩形（宽度和高度不相等）的窗体。因此，您可以像这样编写scale（）方法：transform:scale（1.09,1.13）