罪魁祸首
i{
display inline-block
width .08rem
height .08rem
background-color #D0021B
border-radius 50%
}
画了个圆,在ios中结果很抱负。但是在安卓手机中会有变形的状况存在,衬着方面确切安卓手机干不过ios(毕竟安卓版本浩瀚,另有什么0.5px的线等等的坑,ios都是能圆满运转,安卓总得找hack要领)。
当运用px做单元,border-radius 50%出来的圆是不会变形的,多是安卓在rem盘算过程当中发生偏差或许有什么其他要素形成的衬着题目。
网上有许多的方法,border-radius:9999px;等等,但都没什么软用。
手刃之法
这里我推荐给人人一种要领,能处理这个题目。
i{
display inline-block
width .16rem
height .16rem
background-color #D0021B
border-radius 50%
transform scale(.5)
transform-origin: 0% center
}
就是运用transform scale,先提早把px/rem相干的值放大一倍。然后用transform scale(.5)减少一倍,也就是我们想要的倍数。然后你就会惊异的发明衬着出来的图案,贼圆!接着用transform-origin调解下圆的位置就功德圆满了!
假如对你有协助,点赞珍藏就是对我最大的勉励啦!感谢~~