border-radius安卓版本变形问题

最新推荐文章于 2024-05-10 10:57:08 发布

Kris小菜鸟

最新推荐文章于 2024-05-10 10:57:08 发布

阅读量538

点赞数 1

分类专栏： css基础文章标签： css css3

本文链接：https://blog.csdn.net/Kris1995/article/details/109099520

版权

css基础专栏收录该内容

2 篇文章

订阅专栏

本文探讨了安卓设备上使用rem单位实现圆形边框的变形问题，提出通过transform:scale配合px单位或SVG来确保跨平台圆形效果的一致性，同时介绍了如何通过scale和origin调整来实现完美圆角。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

使用border-radius:50%,或者border-radius的值与宽高相等，都可实现一个完美的圆形，但是在不同的安卓手机中，会有不同程度的变形（有的扁圆，有的大，有的小）；当使用px做为宽高的单位，border-radius:50%画出来的圆是不会变形的；但使用rem时，rem在换算为px时，会是一个带小数点的值，安卓对小于1px的做了处理（不同浏览器对小于1px的处理方式不同，有的采用四舍五入，有的大于某个值展示1px否则就舍去），从而导致圆角不圆；在ios下就没有这个问题。

解决方案：

rem换成px, 但是这样做无法达到适配的目的
使用svg, 既可以适配，即使再小的圆形也能在不同屏幕上完美展示，但又很麻烦
使用transform scale。先把width，height的值放大一倍，然后用transform scale(.5)缩小一倍，接着用transform-origin调整下圆的位置

.dot{
       display: inline-block
       width: .16rem
       height: .16rem
       background-color: red
       border-radius: 50%
       transform: scale(.5)
   }