Question

当我的div border radius和overflow hidden包含内部div＆＃34;抗锯齿＆＃34;从边境似乎影响内部div。

一个例子胜过千言万语：

.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

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

我将.sub更改为带有黑色边框和border-radius本身的绝对div，然后将其定位为-1px top and left to hide（实际上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>

Answer 2

这不是最理想的解决方案，但您可以应用插入框阴影，然后使用z-index定位子元素。由于阴影是插入的，因此需要calc()宽度来计算额外的空间：

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顺序堆叠父级，则会中断：

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

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

容器的border-radius影响内部div

2 个答案: