Divs在彼此的頂部，底部div邊緣顯示。

Question

我做了這個簡單的圓形裝載機 ，其中兩個半圈覆蓋着另外兩個半圈，它們位於它們的正上方。 蓋子旋轉並露出底部圓圈，使其看起來像圓形裝載桿。

問題是底部圓圈的邊緣在某些瀏覽器中是可見的，並且還存在一些移動瀏覽器問題。 這有解決方案嗎？

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的wrap ，它沒有做任何事情（至少在你的例子中）

的jsfiddle