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，但这没有任何区别。我注意到的是，如果我修改盒子的大小，它虽然以某种方式消失了，但是整个事情变得一团糟。

我的问题是我是否可以添加某种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时，我想知道与我使用的任何软件包是否有某些奇怪之处：</ p>

"@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>

隐藏隐藏的溢出时删除小边框

2 个答案: