css3 - <img>圆角属性在手机浏览器显示不全

Question

首先看这张图的对比，同样的网页前端代码出来的效果

再看看我的前端代码，我在上直接加了 border-radius(圆角) 和 border(描边)

想请教大家的是：手机端显示圆角不全的原因是什么？能否在不替换使用圆角属性的情况下解决这个BUG？

Answer 1

I suggest you give it a try:

border-radius: 50%;

Answer 2

The picture is obviously not square, how could it be round?

Answer 3

The avatar is white-bordered twice

Answer 4

Use border-radius:50%;
There is no problem. The author can try a few pictures or change several browsers.
First determine whether the problem is browser compatibility or caused by images