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在彼此的顶部，底部边缘显示。

回答

相关问题