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

Question

我有以下页面（放大）：

这是拥有下一个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>

这是我能想出的最接近我想要构建的形状，如果有意义的话，它是“倒置”的边界半径，边界在周边。正如您所看到的，第一个绝对 div 正在制作图片中出现的实际细边框，即使我确实将溢出设置为隐藏并且下一个元素正在渲染之后。我也尝试将 z-index +9999 设置为第二个 div，但它确实没有任何区别。我注意到的是，如果我修改 box-sizing，它会以某种方式消失，但整个事情就会变得一团糟。

我的问题是我是否可以添加某种 CSS 以使该行消失。

我在这里拥有的额外 css（我主要使用引导程序）：

.corner {
    width: 30px;
    height: 30px;
    border-radius: 100%;
}

.top { 
    top: -15px;
}

.bottom { 
    bottom: -15px;
}

.left { 
    left: -15px; 
}

.right { 
    right: -15px 
}; 

更新

在此处添加小提琴：https://jsfiddle.net/carlostorrecillas/q7mrtjpw/2/

当我使用 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"

更新

我能够重现该问题。似乎当代码位于绝对元素内时，它会呈现我提到的行。更新小提琴：https://jsfiddle.net/carlostorrecillas/x9se4bc2/1/

Answer 1

更新 .my-container 使其也塞入它的边界可以解决这个例子。

.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%);

这将掩盖角落的颜色。

Answer 2

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

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

.padder{
 padding: 10px;
 width: 200px;
 background-color: brown;
}

.overflow_hider{
 overflow: hidden;
}

.parent{
 width: 200px;
 height: 200px;
 border: 5px solid gold;
 background-color: brown;
 box-sizing: border-box;
 position: relative;
}

.edge{
 width: 50px;
 height: 50px; 
 background-color: brown;
 border-radius: 50px; 
 border: 5px solid gold;
}

.edge_tl{
 position: absolute;
 top: -35px; /* 50px * 1/2 + 5px because of 5px border of parent + 5px from own boarder  */
 left: -35px; /* 50px * 1/2 + 5px because of 5px border of parent + 5px from own boarder  */

}

/* SAME GOES for the other edges */
.edge_tr{
 position: absolute;
 top: -35px;
 right: -35px;
}

.edge_bl{
 position: absolute;
 bottom: -35px;
 left: -35px;
}

.edge_br{
 position: absolute;
 bottom: -35px;
 right: -35px;
}

<div class="padder">
  <div class="overflow_hider">
    <div class="parent">
    <div class="edge edge_tl"></div>
    <div class="edge edge_tr"></div>
    <div class="edge edge_bl"></div>
    <div class="edge edge_br"></div>
    </div>
  </div>
</div>