2019年01月19日 作者: 管理员 554次浏览
正常来讲，如果我们设置父亲元素圆角，并且设置超出部分隐藏，那么子元素也应该限制在这个父亲带有圆角的区域内，但事与愿违，如下图：
在之前帮别人做的一个案例中也有同样的问题，因为子元素设置了transform旋转，导致父元素设置overflow:hidde失效，详情查看 使用css3绘制任意角度扇形
在此提供两个解决办法，一种方法是运用-webkit-mask-image通过遮罩来实现，先不谈该方法兼容性的问题，对于复杂形状的图形该方法是很好用的，但是简单的圆角bug就用遮罩有点杀鸡用牛刀大感觉。第二种则是给带有圆角的元素设置transform: rotate(0deg)即可解决该问题。
「两年博客，如果觉得我的文章对您有用，请帮助本站成长」
谢谢你请我吃鸡腿*^_^*
支付宝
微信
上一篇：css3弹性盒子display:flex常见属性总结
下一篇：移动端rem小于12px文字-webkit-text-size-adjust
轩陌（2019-01-19）不会啊
评：移动端rem小于12px文字-webkit-text-size-adjust轩陌（2019-01-19）文字我一般不用rem，直接是px
评：移动端rem小于12px文字-webkit-text-size-adjust
Carl（2019-01-19）骚君的真实经历吧
评：爱情里从来就没有愚人节
春天又到了（2019-01-19）博主现在模拟器上微信不行了，想请你帮忙弄一个源码，有偿。 QQ,361391697
评：反编译获取线上任何微信小程序源码（教程完结）
玫瑰花香（2019-01-19）博主 我碰到了一个反编译会报错。 不知道是什么原因，想你帮我看看 有偿 加我Q8089101...
评：反编译获取线上任何微信小程序源码（教程完结）
不吃鱼的猫（2019-01-19）你这网站现在打开速度好快啊
评：【mac safari浏览器】设置border-radius但overflow:hidden失效问题
你这网站现在打开速度好快啊