当前位置: 首页 > Web前端 > CSS

Android手机中rem单位border-radius-50%画圆变形解决方法

时间:2023-03-31 13:41:48 CSS

罪魁祸首i{displayinline-blockwidth.08remheight.08rembackground-color#D0021Bborder-radius50%}画圆,在ios中完美运行。不过在安卓手机上会有变形。在渲染方面,安卓手机做不了ios。).当以px为单位时,border-radius50%形成的圆不会变形,这可能是Android的rem计算过程出错或者其他因素导致的渲染问题。网上有很多方法,border-radius:9999px;等等,但没有一个是软的。手刃法这里我向大家推荐一个可以解决这个问题的方法。i{displayinline-blockwidth.16remheight.16rembackground-color#D0021Bborder-radius50%transformscale(.5)transform-origin:0%center}是使用transformscale,先放px/rem相关值提前双倍放大。然后使用transformscale(.5)将大小加倍,这就是我们想要的倍数。然后你会惊奇地发现渲染出来的图案是圆的!然后用transform-origin调整下圆的位置就大功告成了!如果对你有帮助,点赞收藏就是对我最大的鼓励!谢谢~~