更新

Question

<div style="position:relative; width:500px; height:500px; background:blue; border-radius:50%;">
     <span style="position:absolute; width:100%; height:100%; background:white; border-radius:50%;"></span>
</div>

我的问题是当有一个位置时会出现一个奇怪的边框：绝对位于一个位置：相对于border-radius：50％。

一直在寻找解决方案的时间，但一直无法找到答案。

我一直在为Days制作更先进的东西，一个饼图＆＃34;。除了这个边界问题，一切都有效。如果没有边界问题的解决方案，我也可以将它全部扔进垃圾桶;＆＃39;（。

错误显示在：Edge和Chrome中，如果您将：transform：rotate（90deg）应用于绝对元素，也可以在firefox中看到。

更新

我用饼图创建了一个codepen，以更具体地展示我尝试解决的问题： https://codepen.io/anon/pen/evXJPw

Answer 1

删除背景：蓝色;从你的外容器。或者，如果你真的想要那种背景颜色。确保定位已死，然后使用1px边框隐藏背景间隙。在FF http://codepen.io/anon/pen/MpLqPd

看起来不错

或者使用SVG，对圆圈来说要好得多。

.outer{
  position:relative; 
  width:500px; 
  height:500px; 
  background:blue; 
  border-radius:50%;
}
.inner{
  position:absolute; 
  top: 50%;
  left: 50%;
  transform: ;
  width:100%; 
  height:100%; 
  background:#e3e3e3; 
  border-radius:50%;
  border: 1px solid #e3e3e3;
}
.seeInfirefox{
  transform-origin: 50% 50%;
  transform:translateX(-50%)translateY(-50%)rotate(90deg);
}

UGLY BORDER bug，position：relative＆gt;位置：绝对＆gt; border-radius：50％，见小提琴

更新

1 个答案: