评论

border-radius元素、overflow:hidden选择性失效问题 iPhone ios

border-radius元素、overflow:hidden选择性失效问题 iPhone ios

问题原因:父级设置圆角属性失效 父元素使用border-radius和overflow:hidden做成圆形,子元素如果使用了transform属性,则父元素的border-radius、overflow:hidden会失效。

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

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


这两个css属性放到父级就可以了


最后一次编辑于  2021-12-24  
点赞 1
收藏
评论
登录 后发表内容