html - 容器的边界半径影响内部 div

Question

当我有一个 div 带有 border radius 和 overflow hidden 包含内部 div 时，“anti -aliasing"从边界似乎影响内部 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

是overflow: hidden的问题；线。我的解决方案有点棘手。容器有边框大小，但子 div 没有，所以这个修改后的子实际上比你的宽 1px，长 2px，高度与容器 div 相同。

我将 .sub 更改为具有黑色边框和 border-radius 本身的绝对 div，然后将其定位为 -1px top 和 left 以隐藏(实际上 3 个边框正好位于容器 div 的 3 个边框的顶部) .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>