CSS设置图片圆角显示效果问题

Question

我将一个图片的宽高设为定值，然后设置图片的border-radius为50%，但是有些图片显示出来却像是一个八边形而不是圆形，感到疑惑，像是这样：

希望大佬们可以帮我解决一下这个疑惑
这是原图的信息

Answer 1

原图长啥样

Answer 2

.avatar {width:200px;height:200px;border-radius:50%;border:10px solid #FFF;background:url('xxx.jpg') center center/cover no-repeat;box-shadow:0 0 0 4px #000;}

Answer 3

目测你的图片不是正方形，宽高一致再设置就不会如此了。