border-radius导致overflow:hidden失效问题。

时间:2023-03-09 05:45:08
border-radius导致overflow:hidden失效问题。

如果一个父元素设置了overflow:hidden属于的同时还设置了border-radius属性,那么如果想隐藏超出的子元素,四个圆角处会出现超出圆角依然显示的bug;

border-radius导致overflow:hidden失效问题。

一种方法是运用-webkit-mask-image通过遮罩来实现,先不谈该方法兼容性的问题,对于复杂形状的图形该方法是很好用的,但是简单的圆角bug就用遮罩有点杀鸡用牛刀大感觉。

border-radius导致overflow:hidden失效问题。

其实解决这个问题,只需在父元素同时设置transform: rotate(0deg)即可解决该问题,亲测可行。