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的圆圈将其放在要删除的边框上？例如：

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

然后只删除overflow:hidden的{{1}} wrap它没有做任何事情（至少在你的例子中）

<强> JSFIDDLE

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

1 个答案: