border-radius元素overflow:hidden失效问题

最新推荐文章于 2021-11-23 15:57:41 发布

weixin_30824479

最新推荐文章于 2021-11-23 15:57:41 发布

阅读量96

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tangbuluo/p/7596584.html

本文介绍了一种解决父元素使用border-radius和overflow:hidden创建圆形布局时，子元素使用transform导致overflow:hidden失效的问题方法。通过使用-webkit-mask-image属性，可以有效遮罩圆角部分，实现预期效果。

父元素使用border-radius和overflow:hidden做成圆形，子元素如果使用了transform属性，则父元素的overflow:hidden会失效。

解决方法：

父元素使用 -weibkit-mask-image 覆盖掉圆角部分。-webkit-mask-image 可以使用图片、Gradient 渐变或者 SVG mask 作为元素的 mask 遮罩。在 WebKit 的兼容性还算可以

/*image*/
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
/*gradient */
-webkit-mask-image: -webkit-radial-gradient(white, black);

转载于:https://www.cnblogs.com/tangbuluo/p/7596584.html