html背景超出隐藏,css – 当父级溢出时,父级的背景显示在子级边界半径周围：隐藏...

造成这种情况的原因是背景的边界是抗锯齿的,然后允许通过它进行一定量的混合.

应用变换可以以某种方式使其变得不那么明显：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;

}

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！