css - 边界之间无法识别的空间

Question

我有一个包含四个 div 的容器。所有内部 div 都具有绝对位置和相同的大小。当我添加边框而不是圆圈时，我收到了某种切片蛋糕:

这个空间从何而来，为什么？ jsfiddle link

.container {
  position: relative;
  background: black;
  width: 250px;
  height: 250px;
  margin: auto;
  padding: 50px;
}
.container > div {
    position: absolute;
    content: '';
    border-width: 50px;
    border-style: solid;
    border-radius: 50%;
}
.container > div:nth-child(1) {
  border-color: transparent transparent transparent green;
}
.container > div:nth-child(2) {
  border-color: transparent transparent green transparent;
}
.container > div:nth-child(3) {
  border-color: transparent green transparent transparent;
}
.container > div:nth-child(4) {
  border-color: green transparent transparent transparent;  
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

不是很漂亮的解决方法，但它看起来不错。这个问题似乎是一个渲染工件，所以我想不可能有一个真正好的解决方案。

.container {
  position: relative;
  background: black;
  width: 250px;
  height: 250px;
  margin: auto;
  padding: 50px;
}
.container > div {
    position: absolute;
		content: '';
		border-width: 50px;
		border-style: solid;
		border-radius: 50%;
}
.container > div:nth-child(1) {
  border-color: transparent transparent transparent green;
  transform: translate3d(1px, 0 , 0);
}
.container > div:nth-child(2) {
	border-color: transparent transparent green transparent;
  transform: translate3d(0, -1px , 0);
}
.container > div:nth-child(3) {
  border-color: transparent green transparent transparent;
  transform: translate3d(-1px, 0 , 0);
}
.container > div:nth-child(4) {
  border-color: green transparent transparent transparent;  
  transform: translate3d(0, 1px , 0);
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>