HTML 取图片中间部分，并呈圆形

今天想弄个处理用户头像的代码， 之前都是服务端处理好的图片，HTML直接用就是，这次想着在前端用css设置然后取img中间圆形作为用户头像。方法找了好多，效果都不太理想。最后找到一方法，看着还行。方法如下：

<div class="a1">
    <img src="#########" alt="用户头像" height="50px">
</div>

<style>
    .a1{
        position: relative;
        width: 50px;
        height: 50px;
        overflow: hidden;
        border-radius: 50%;   --->取圆形
    }
    img{
        position: absolute;
        margin: auto;
        top: -99999px;
        right: -99999px;
        bottom: -99999px;
        left: -99999px;
    }
</style>
可参考链接--》https://blog.csdn.net/weixin_43837268/article/details/85321328