一、出現(xiàn)場(chǎng)景：使用mosowe-swiper：適用于uni-app的輪播圖插件，圓弧無(wú)效

ios手機(jī)會(huì)在transform的時(shí)候?qū)е耣order-radius失效解決方法：在使用動(dòng)畫效果帶transform的元素的上一級(jí)div元素的css加上下面語(yǔ)句：

transform: rotate(0deg);
-webkit-transform: rotate(0deg);

二、場(chǎng)景分析

ios中使用border-radius導(dǎo)致overflow:hidden出現(xiàn)失效問(wèn)題,如下結(jié)構(gòu):

<div class="swiper-outbox"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item,index) in items" v-bind:key="index"><img v-bind:src="item.address" alt /></div></div></div>
</div>

三.解決過(guò)程

1. 通常情況下把overflow: hidden; border-radius: 20px;設(shè)置在圖片的父級(jí),即.swiper-slide上即可解決問(wèn)題.
2. 但有些情況無(wú)法將屬性設(shè)置在父級(jí)或設(shè)置在父級(jí)會(huì)出現(xiàn)結(jié)果不符合預(yù)期,如下:

當(dāng)輪播圖中,將屬性設(shè)置在父級(jí),每個(gè)圖片都有border-radius,這樣顯得不美觀.
該問(wèn)題出現(xiàn)主要是因?yàn)閕os中使用transform導(dǎo)致,可在期望設(shè)置overflow: hidden; border-radius: 20px;的元素上(當(dāng)前例子即.swiper-outbox)設(shè)置transform: rotate(0deg)即可解決該問(wèn)題.

border-radius: 20px;
// 兼容ios的圓角問(wèn)題
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
overflow: hidden;