以rem为单位,数值较小,border-radius:50%部分浏览器渲染不圆方法

元素使用rem做单位且较小时,对于border-radius:50%在部分浏览器不圆解决方法:
1、将原来宽高扩大至两倍(.1rem --> .2rem),再使用transform:scale(.5);transform-origin: 0% 50%进行缩放。
2、将元素rem单位换位px为单位。

/*方法1*/
.ellipsisDot {
    display: inline-block;
    width: .2rem;
    height: .2rem;    
    background: #C6C6C6;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-transform: scale(.5);
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -moz-transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}

/*方法2*/
.ellipsisDot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C6C6C6;
    margin-left: 3px;
}

 

posted @ 2020-10-28 09:10  し7709  阅读(280)  评论(0编辑  收藏  举报