从容器冲击内部分区的边界半径

Question

当我有一个div与border radius和overflow hidden包含一个内部div从边界的“反锯齿”似乎影响内部分区。

一个例子是比千言万语更好：

JSfiddle example:

.container{ 
    border:1px solid black; 
    height:2rem; 
    width:9rem; 
    /**/ 
    overflow: hidden; 
    border-radius:0.4rem 0 0 0 ; 
} 
.sub{ 
    /*border-radius:0.4rem 0 0 0 ;*/ 
    background:purple; 
    width:2rem; 
    height:100%; 
} 

<div class="container"> 
    <div class="sub"> 


    </div> 
</div> 

因此，它是挺难看的，但如果你放大到像素级别是相当明显的。我知道这是挑剔的，但我看到它，它很烦人。

所以我想知道什么可能是解决方案呢？

我试着在内部div上设置z-index而没有运气。

Answer 1

这是溢出问题：hidden;线。我的解决方案有点棘手。该容器具有边框大小，但子div没有，所以这个修改的子实际上比您的更宽1px和2px，与容器div具有相同的高度。

我将.sub改为带有黑色边框和边框半径的绝对div，然后将其置于-1px顶部并向左隐藏（实际上，3个边框正好位于容器的3个边框的顶部div）.sub的黑色边框（请记住将sub div的border-right设置为none/0）。这样，我们得到你想要的。

.container{ 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    height:2rem; 
 
    width:9rem; 
 
    border:1px solid black; 
 
    border-radius: 0.4rem 0 0 0; 
 
} 
 
.sub{ 
 
    position: absolute; 
 
    top: -1px; 
 
    left: -1px; 
 
    box-sizing: initial; 
 
    display: block; 
 
    background:purple; 
 
    width:2rem; 
 
    height:100%; 
 
    border:1px solid black; 
 
    border-right: 0; 
 
    border-radius: 0.4rem 0 0 0; 
 
}

<div class="container"> 
 
    <div class="sub"> 
 
      
 
     
 
    </div> 
 
</div>

Answer 2

这不是最理想的解决方案，但你可以申请一个嵌入式箱的影子，然后利用定位的z-index子元素。由于影子插图，则需要calc()宽度占多余空间：

https://jsfiddle.net/qob6qjc6/7/

：

https://jsfiddle.net/qob6qjc6/6/

.container{ 
    box-shadow: inset 0 0 0 1px #000; 
    height: calc(2rem + 2px); 
    width: calc(9rem + 2px); 
    overflow: hidden; 
    border-radius:0.4rem 0 0 0; 
} 
.sub{ 
    background:purple; 
    width:2rem; 
    height:100%; 
    position: relative; 
    z-index: -1 
} 

此，如果你堆在z顺序父打破

.container{ 
    box-shadow: inset 0 0 0 1px #000; 
    height: calc(2rem + 2px); 
    width: calc(9rem + 2px); 
    overflow: hidden; 
    border-radius:0.4rem 0 0 0; 

    position: relative; 
    /* as soon as you set the z-index on the parent, it breaks */ 
    z-index: 1; 
} 
.sub{ 
    background:purple; 
    width:2rem; 
    height:100%; 
    position: relative; 
    z-index: -1 
}