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

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

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

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

 

posted @ 2016-08-16 11:32  梦笔生花  阅读(4656)  评论(0)    收藏  举报