同事找我解決一個問題 說安卓圓角沒問題 蘋果上失效了 我一看 其實就是沒做兼容
上圖給你們看看
有沒有看出來 其實就是父級設置圓角屬性失效 父元素使用border-radius和overflow:hidden做成圓形，子元素如果使用了transform屬性，則父元素的overflow:hidden會失效。 我同事用css3動畫給這些字體價格閃閃旋轉的金邊
這個好辦
父元素使用 -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 加上就搞定
不信你試試，我相信你會回來點贊的！！！！