css - UGLY BORDER 错误，位置 :relative > position:absolute > border-radius:50% , 参见 fiddle

Question

https://jsfiddle.net/0h3rqqru/

<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>

我的问题是当有一个位置时出现奇怪的边界:绝对在一个位置内:相对边界半径:50％。

为此搜索了数小时的解决方案，但未能找到答案。

我已经工作了 Days 来构建稍微更高级的东西，一个“饼图”。除了这个边界问题，一切正常。没有解决边界问题，我还不如把它扔进垃圾桶;'(.

错误可见于: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);
}