Divs在彼此的顶部，底部div边缘显示。

I made this sorta simple circular loader-thingy, whith two half circles covered with another two half circles that are positioned right on top of them. The covers rotate and reveal the bottom circles to make it look like a circular loading bar.

我做了这个简单的圆形装载机,其中两个半圈覆盖着另外两个半圈,它们位于它们的正上方。盖子旋转并露出底部圆圈,使其看起来像一个圆形的装载杆。

The problem is that the edge of the bottom circles are visible in some browsers, and there are some mobile browser issues with that as well. Is there a solution for this?

问题是底部圆圈的边缘在某些浏览器中是可见的,并且还存在一些移动浏览器问题。这有解决方案吗?

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>

1 个解决方案

#1

what about using a circle with transparent background and white border bigger than holeto put it over the border you want to remove?like:

如何使用透明背景和白色边框大于孔的圆圈将其放在要删除的边框上?如:

.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;
}

then just remove the overflow:hiddenof wrapwhich it's not doing anything (at least in your example)

然后只需删除溢出:hiddenof wrapwhich它没有做任何事情(至少在你的例子中)

JSFIDDLE

#1