Html 应用溢出隐藏时删除小边框

我有以下页面（放大）：

这是生成下一个html的结果：

<div class="background-dark-brown p-2 light-brown">
    <div class="position-relative overflow-hidden">
        <div class="position-absolute overflow-hidden top-0 left-0 w-100 h-100 border-brown background-dark-brown"></div>
        <div class="position-absolute corner top right border-brown background-dark-brown"></div>
    </div>
</div>

更新

在这里添加了小提琴：

当我使用Angular时，我想知道我使用的任何软件包是否有奇怪的地方：

"@angular/animations": "7.2.13",
    "@angular/common": "7.2.13",
    "@angular/compiler": "7.2.13",
    "@angular/core": "7.2.13",
    "@angular/forms": "7.2.13",
    "@angular/http": "7.2.13",
    "@angular/platform-browser": "7.2.13",
    "@angular/platform-browser-dynamic": "7.2.13",
    "@angular/platform-server": "7.2.13",
    "@angular/router": "7.2.13",
    "@fortawesome/angular-fontawesome": "0.3.0",
    "@fortawesome/fontawesome-svg-core": "1.2.16",
    "@fortawesome/free-brands-svg-icons": "5.8.0",
    "@fortawesome/free-solid-svg-icons": "5.8.0",
    "@nguniversal/common": "7.1.1",
    "@nguniversal/express-engine": "7.1.1",
    "@nguniversal/module-map-ngfactory-loader": "7.1.1",
    "@nicky-lenaers/ngx-scroll-to": "2.0.0",
    "bootstrap": "4.2.1",
    "core-js": "2.6.5",
    "luxon": "1.13.0",
    "ngx-cookie": "4.1.2",
    "rxjs": "6.4.0",
    "web-animations-js": "2.3.1",
    "zone.js": "0.9.0"

更新

---

我能够重现这个问题。似乎当代码位于绝对元素中时，它会呈现我提到的行。更新的Fiddle:

更新.my容器以将其边框也折叠起来，在本例中解决了这个问题

.my-container {
    height: 525px;
    width: 305px;
    background: #dea762;
    padding: 2px;
   -webkit-transform: translateZ(0);
   -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

}

结果如下：

   -webkit-transform: translateZ(0);
   -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

这会在有问题的零件周围创建一个遮罩。显然，这只解决了这个例子中的问题。您可能希望考虑一个不同的布局来一般性地解决它。 另外两行如下：

   -webkit-transform: translateZ(0);
   -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

---

这将遮罩角颜色。

这是我的方法，我确信边框将不可见，因为它肯定隐藏在渲染边的子元素下

基本上，我只是将圆角边缘覆盖在父对象的原始边框上， 然后将溢出隐藏在

overflow\u hider

.padder{
填充：10px；
宽度：200px；
背景颜色：棕色；
}
.溢出隐藏{
溢出：隐藏；
}
.家长{
宽度：200px；
高度：200px；
边框：5px纯金；
背景颜色：棕色；
框大小：边框框；
位置：相对位置；
}
.边缘{
宽度：50px；
高度：50px；
背景颜色：棕色；
边界半径：50px；
边框：5px纯金；
}
.edge_tl{
位置：绝对位置；
顶部：-35px；/*50px*1/2+5px，因为父代的5px边框+5px来自自己的寄宿生*/
左图：-35px；/*50px*1/2+5px，因为父代的5px边界+5px来自自己的寄宿者*/
}
/*其他边也是如此*/
.edge_tr{
位置：绝对位置；
顶部：-35px；
右：-35px；
}
.edge_bl{
位置：绝对位置；
底部：-35px；
左：-35px；
}
.edge\u br{
位置：绝对位置；
底部：-35px；
右：-35px；
}

您可以尝试添加

background:transparent

不确定这是否是问题所在，但可能是类

position relative overflow hidden

的div有边框。因此，请尝试添加一个具有以下边界的新类：

border:0对于该分区，您可以从现有代码创建一个小提琴吗？如果手头没有所有使用过的CSS规则，很难诊断是什么导致了这条细线。@carlostrecillas，您是否使用任何边框来对“我的容器”进行分类？因为你提供的小提琴看起来不错啊！是的，这是在Chrome上发生的，但不是在FF@RutherfordWonkingtonI把它添加到我的小提琴上，它没有解决问题issue@CarlosTorrecillas我不得不在jsfiddle中再次按“run”。在Chrome中，这个角消失了。如果你放大，你甚至可以在屏幕快照中看到更圆的边框最后一次尝试@carlostrecillas我的视力一定在下降！！呵呵，现在在你编辑了答案之后，它确实没有出现！