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

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(我主要使用 bootstrap):

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

.top { 
    top: -15px;
}

.bottom { 
    bottom: -15px;
}

.left { 
    left: -15px; 
}

.right { 
    right: -15px 
}; 

更新

在此处添加了 fiddle :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"

更新

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

Answer 1

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

基本上我只是在parent的原始边框上覆盖圆边， 然后在 overflow_hider

中 overflow hidden

.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>