1. 程式人生 > >border-radius:50%在安卓機上無效

border-radius:50%在安卓機上無效

頁面上寫了個小紅圓點,在電腦和iphone上正常的,但是在安卓手機上,紅點變成了帶圓角的正方形或長方形,不同安卓手機還有點不一樣,程式碼如下:

{
    background-color: #f1464a;
    width:.2rem;
    height:.2rem;
    border-radius:50%;
}

後面百度了下,原來安卓部分低版本系統,不支援border-radius:50%;的寫法,把圓角改成比寬高遠遠要大的一個值就好了,並且快高度最好使用px,要不rem出現奇數可能也會導致不圓,

{
    background-color: #f1464a;
    width
:4px
; height:4px; border-radius:20px; }