html - Div 彼此重叠，底部 div 边缘显示。

Question

我做了这个sorta simple circular loader-thingy , 两个半圆覆盖着另外两个位于它们正上方的半圆。盖子旋转并露出底部的圆圈，使其看起来像一个圆形加载栏。

问题是底部圆圈的边缘在某些浏览器中是可见的，并且也存在一些移动浏览器问题。有解决办法吗？

CSS

.wrap{
    position:relative;
    width:100px;
    height:100px;
    overflow:hidden;
    border-radius:50px;
}
.circle{
    position:absolute;
    top:0;
    width:50px;
    height:100px;
    background:black;
}
.cover{
    position:absolute;
    left:0;
    width:50px;
    height:100px;
    background:white;
}
.halfcircleleft{
    width:50px;
    position:absolute;
    top:0;
    left:0;
}
.halfcircleleft .circle{
    z-index:3;
    border-radius:50px 0 0 50px;
}
.halfcircleleft .cover{
    z-index:4;
    border-radius:50px 0 0 50px;
}

HTML

<div class="wrap">
    <div class="halfcircleleft">
        <div class="circle"></div>
        <div class="cover"></div>
    </div>

    <div class="halfcircleright">
        <div class="circle"></div>
        <div class="cover"></div>
    </div>
</div>

Answer 1

使用透明背景和白色边框大于孔的圆圈将其放在要删除的边框上怎么样？比如:

.hole, .hole2{
    z-index:99;
    position:absolute;
    width:86px;
    height:86px;
    top:7px;
    left:7px;
    background:lightgrey;
    border-radius:50%;
    text-align:center;
    line-height:86px;
    font-family:Arial;
    font-size:38px;
    padding-right:2px;
}
.hole2 {
    background:transparent;
    border:4px solid white;
    width:106px;
    height:106px;
    top:-3px;
    left:-3px;
}

然后只需删除 wrap 的 overflow:hidden 它什么也没做(至少在你的例子中)

JSFIDDLE