Css 边界之间未识别的空间

我有一个有四个

div

的容器。所有内部

div

具有绝对位置和相同大小。当我添加边框而不是圆圈时，我收到了某种切片蛋糕：

这个空间从哪里来，为什么？

.container{
位置：相对位置；
背景：黑色；
宽度：250px；
高度：250px；
保证金：自动；
填充：50px；
}
.container>div{
位置：绝对位置；
内容：''；
边框宽度：50px；
边框样式：实心；
边界半径：50%；
}
.container>div:n个子项（1）{
边框颜色：透明绿色；
}
.container>div:n子级（2）{
边框颜色：透明绿色透明；
}
.container>div:n子级（3）{
边框颜色：透明绿色透明；
}
.container>div:n子级（4）{
边框颜色：绿色透明；
}

---

为div添加背景色：

.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%;
        background-color:green;
}
.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;  
}

---

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

.container{
位置：相对位置；
背景：黑色；
宽度：250px；
高度：250px；
保证金：自动；
填充：50px；
}
.container>div{
位置：绝对位置；
内容：''；
边框宽度：50px；
边框样式：实心；
边界半径：50%；
}
.container>div:n个子项（1）{
边框颜色：透明绿色；
变换：translate3d（1px，0，0）；
}
.container>div:n子级（2）{
边框颜色：透明绿色透明；
变换：translate3d（0，-1px，0）；
}
.container>div:n子级（3）{
边框颜色：透明绿色透明；
转换：translate3d（-1px，0，0）；
}
.container>div:n子级（4）{
边框颜色：绿色透明；
变换：translate3d（0，1px，0）；
}

---

不确定原因，但这解决了您的问题

.container > div:nth-child(4) {
    border-color: green;
}

.container{
位置：相对位置；
背景：黑色；
宽度：250px；
高度：250px；
保证金：自动；
填充：50px；
}
.container>div{
位置：绝对位置；
内容：''；
边框宽度：50px；
边框样式：实心；
边界半径：50%；
}
.container>div:n个子项（1）{
边框颜色：透明绿色；
}
.container>div:n子级（2）{
边框颜色：透明绿色透明；
}
.container>div:n子级（3）{
边框颜色：透明绿色透明；
}
.container>div:n子级（4）{
边框颜色：绿色；
}

那么为什么要使用带边框部分的多个div呢？因为最后一个div是完全填充的（而不仅仅是一个切片），所以它会隐藏后面的那些div。如果他需要在单独的div中使用切片，那么这样做是没有用的，只需删除其余部分，留下一个具有单一边框颜色的div就更简单了。我仍然不明白为什么一开始会发生这样的事情。我认为这是一个渲染工件。为什么你需要有4个不同的div而不是一个div？根据您的需要，您可以只使用一个，并避免此伪影。我要创建动画，它将是关键帧。主容器

div

会旋转，然后片会散开。所有浏览器似乎都有相同的问题。它可能不符合bug的条件，这是你想做的一件奇怪的事情。不是设计的边界。也许用一个剪辑路径来做切片。问题是我只希望有一个没有线条的输出。我想，几乎每个人都不知道这些台词是从哪里来的。我以另一种方式制作了我的作品，但浏览器渲染的问题仍然存在。我不想解决这个任务，我想知道，为什么我有这个输出。一个有四个边框的元素和四个有一个边框的元素有什么区别？这些线只是不同div中边框部分之间的间隙。这就是为什么用translate3D将它们移动到中心可以消除间隙的原因。这只是它们的渲染方式，总是会有这个最小的间隙。我不知道细节，我需要成为渲染引擎的开发人员……这是一个更具修辞性的问题，无论如何，谢谢你的回答，这对我帮助很大。