css兼容ie浏览器下面圆形问题

网上搜到的，这个办法确实可行的，原理就是做一张遮罩图片（中间是圆形，其他颜色根据背景色设置），然后设置浮动到要显示的图片上，设置个z-index就可以了。
html代码

<div class="user-img">
              <img src="xx.png" class="icon-wapper">
              <img src="qq.jpg" class="icon">
</div>

css代码

.user-img{

    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.user-img img{
    width: 50px;
    height: 50px;
}
.icon-wapper{
    position: absolute;
    z-index: 10;
}

.icon{

    position: absolute;

    width: 50px;
    height: 50px;
    z-index: 9;

}

icon-wapper的图片制作直径为50px的透明圆形如下图，四角黑色为头像的背景色

icon的图片可以是任意的，如下图

结果如下图

具体情况请做具体调整