css显示小圆变形的问题

❗❗解决方法直接拖到文尾

❗❗解决方法直接拖到文尾

❗❗解决方法直接拖到文尾

显示小尺寸的图形时给的宽高一样，但就是某些尺寸时不时会变形：

.is-dot::before {
    content: '';
    width: 11px;
    height: 11px;
    margin-left: -5px;
    border-radius: 50%;
    background: red;
    position: absolute;
}

大概率出现在不能被2整除时

11 * 50% = 5.5

element使用的dot组件给的尺寸是8px

.el-badge__content.is-dot {
    height: 8px;
    width: 8px;
    padding: 0;
    right: 0;
    border-radius: 50%;
}

这个宽高应该是没有问题的

其他的尺寸无论是用伪元素自己画还是直接加svg图片都会出现这个问题
margin-top或top也会对图形产生一定影响

可能是浏览器在计算过程中产生误差或者有什么其他因素造成的渲染问题。

❗❗❗解决方法：

transform: scale(0.5);

.menu-circle-icon {
    width: 20px;
    height: 20px;
    margin-top: -4px;
    margin-right: 5px;
    margin-left: -10px;
    transform: scale(0.5);
}

给两倍宽高后用transform缩小即可

❗但是注意和周围元素的间距也会加上一倍宽高，加大的宽高占位