丑陋的边框错误，position:relative > position:absolute > border-radius:50% ，参见 fiddle

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>

我的问题是，当 position:absolute 位于 position:relative 内部并且 border-radius:50% 时，会出现奇怪的边框。

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

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

错误可见于：Edge 和 Chrome，如果您将 transform:rotate(90deg) 应用于绝对元素，则在 firefox 中也可见。

更新

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

Answer 1

删除background:blue；从你的外容器。或者，如果您真的想要那里的背景颜色。确保定位准确，然后使用 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);
}

丑陋的边框错误，position:relative > position:absolute > border-radius:50% ，参见 fiddle

UGLY BORDER bug, position:relative > position:absolute > border-radius:50% , see fiddle

css

firefox

google-chrome

microsoft-edge

更新