这是我刚才问过的question的扩展.然而这次问题更具体,更接近我正在努力的实际情况.
如果另一个元素中有一个元素,并且父元素和子元素都具有border-radius,并且父元素的背景与子元素不同,则它会在子元素的圆角周围可见.
如果父元素上有overflow：hidden属性,则问题会更加严重.然后,涉及使子元素的border-radius小于父元素的border-radius的solution不再起作用.
CodePen上的示例：http://codepen.io/azangru/pen/pgmOvJ(观察子元素黑色背景下方的黄色背景).
HTML：
CSS：
html,body {
height: 100%;
margin: 0;
padding: 0;
}
.dark-bg {
height: 100%;
width: 100%;
padding-top: 10px;
background: black;
}
.outer {
width: 200px;
height: 200px;
margin: auto;
background: white;
border-radius: 10px;
overflow: hidden;
}
.middle {
width: 100%;
height: 50%;
background: yellow;
border-radius: 10px 10px 0 0;
}
.inner {
width: 100%;
height: 100%;
background: black;
border-radius: 10px 10px 0 0;
}
.some-text {
margin-top: 20px;
padding: 0 10px;
}
有没有办法让孩子的背景完全覆盖父母的背景？
(当然,一个显而易见的解决方案是从父项中删除overflow：hidden属性并为文本添加另一个容器,反过来又会溢出：hidden.但是,如果可能的话,我真的不想这样做)
最佳答案
造成这种情况的原因是背景的边界是抗锯齿的,然后允许通过它进行一定量的混合.
应用变换可以以某种方式使其变得不那么明显：translateZ(0px)应用于内部元素.
一种不太通用但更有效的解决方案是将阴影应用于内部
/*
.inner {
Box-shadow: 0px 0px 0px 1px black;
}
*/
html,body {
height: 100%;
margin: 0;
padding: 0;
}
.dark-bg {
height: 100%;
width: 100%;
padding-top: 10px;
background: black;
}
.outer {
width: 200px;
height: 200px;
margin: auto;
background: white;
border-radius: 10px;
overflow: hidden;
}
.middle {
width: 100%;
height: 50%;
background: yellow;
border-radius: 10px 10px 0 0;
}
.inner {
width: 100%;
height: 100%;
background: black;
border-radius: 10px 10px 0 0;
position: relative;
}
.inner:after {
content: "";
position: absolute;
background-color: inherit;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.some-text {
margin-top: 20px;
padding: 0 10px;
}
原文链接：https://www.f2er.com/css/426959.html
