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

我做了這個sorta simple circular loader-thingy，兩個半圈覆蓋着另外兩個半圈，它們位於它們的正上方。封面旋轉並顯示底部的圓形，使其看起來像一個圓形的加載條。Divs在彼此的頂部，底部邊緣顯示。

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

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>

來源

2015-11-18 kylmark

一）這很酷。 b）我認爲你不能解決這個問題。幾乎不可能讓所有瀏覽器都反映相同的像素完美版本的html，特別是在處理曲線時。 – BFWebAdmin

我很害怕那個。我希望能夠通過使用邊框或其他東西來使它看起來相同。或者，我錯過了使用供應商前綴的東西.. – kylmark

您是否使用固體CSS重置塊？你有沒有可以測試的特定瀏覽器或其截圖？ – Hans

怎麼樣用一個圓圈，透明背景和白色邊框比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 of wrap它不是（至少在你的例子）做任何事情

JSFIDDLE

來源

2015-11-18 09:07:39

我覺得我之前嘗試過類似的東西，而且手機上有些東西是關閉的。但是這有些不同，可能實際上工作！我會做一些測試。謝謝！ – kylmark

似乎工作正常！：D – kylmark

很高興能幫到你。 gl與你的項目。 –

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

回答

相關問題