兼容ie8以下的圆角头像制作方法

html代码

             
             

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的图片可以是任意的，如下图

结果如下图

具体情况请做具体调整