border-radius画圆

Posted 2023-03-21

参考技术A

Time: 20200131

显示效果：

只需要加一行：

这样就变成了圆形。

简写法：

分别拿出四个值分别设置，我们还可以分成 x 和 y 轴来设置。

效果如下：

END.

在安卓手机中rem单位border-radius:50%画圆变形的解决方案

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

解决方案：

1. 很多文章指出直接用px, 但是这样做无法达到适配的目的
2. 还有的说设置一个很大的值：border-radius:9999px,亲测不行（如：华为）
3. 使用svg, 既可以适配，即使再小的圆形也能在不同屏幕上完美展示，但又很麻烦

推荐之法：

  i{
       display inline-block
       width .16rem
       height .16rem
       background-color #D0021B
       border-radius 50%
       transform scale(.5)
       transform-origin: 0% center
   }
先把width，height的值放大一倍，然后用transform scale(.5)缩小一倍，接着用transform-origin调整下圆的位置就大功告成了！