丑陋的边框错误，位置：相对 >位置：绝对>边框半径：50%，见小提琴

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%时，会出现一个奇怪的边框。

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

我花了几天时间在构建一些稍微高级的东西，一个"饼图"。除了这个边界问题之外，一切都有效。如果没有解决边界问题的办法，我可能会把它全部扔进垃圾桶。(.

错误在：Edge 和 Chrome 中可见，如果您应用：transform：rotate(90deg(，在 Firefox 中也可见到绝对元素。

更新

我

用饼图创建了一个代码笔，以更具体地显示我正在尝试解决的问题：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);
}