设置圆角border-radius值为50%安卓各版本会变形

在H5页面通过css样式设置圆角，比如border-radius：50%，这样的方式，在不同的安卓浏览器里，其表现的形式也会有不一样，会出现大小不一致，有些扁圆，有些大，有些小，但是在IOS系统不会出现问题。

经排查，如果使用rem单位表示宽高，会有问题，如下：

.car-radius {
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 50%;
    border: 1px solid black;
}

为了兼容不同分辨率的手机，我们会设置rem、em单位，很少直接设置px单位，但是安卓很多版本不一致，兼容不好。

解决办法：

.car-radius {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid black;
}

将rem单位改成px即可。

还有一种方式，就是把圆形图标改成图片的形式，也是能够兼容其他浏览器。