微信小程序 CSS 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属性放到父级就可以了 ） 好麻烦

方法二：
-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);
ok 加上就搞定 如下图