問題復現：
先貼一下我的佈局代碼，爲防止其他干擾，代碼只含有必要內容。
<template>
<view>
<swiper class="swiper-box" :autoplay="true" :circular="true">
<swiper-item class="swiper-item" v-for="(item, index) in urls" :key="index">
<image class="swiper-img" :src="item"></image>
</swiper-item>
</swiper>
</view>
</template>
CSS代碼如下：注意“border-radius”樣式，很多人通常會直接加在image組件上，因爲這樣可以立現我們所需要的效果。
.swiper-box {
margin: 30rpx;
}
.swiper-item {
width: calc(100vw - 60rpx);
height: calc(50vw - 30rpx);
}
.swiper-img {
width: 100%;
height: 100%;
border-radius: 30rpx;
}
效果如下：
但在滑動切換過程中我們會發現四個角仍是直角，而且銜接處是圓角，對於有強迫症的人來說是無法忍受的！
問題分析：
1.swiper組件本身不存在任何屬性能實現我們所需要的效果，所以問題的關鍵還在於樣式。
2.直角是image劃出時內容本身形成的，與image的角無關。
3.改變image在滑動過程中的樣式是不太實際的，所以需要從父佈局入手。
解決辦法：
將“border-radius”剪切到“swiper-box”的樣式中，並添加“overflow:hidden;”，從根本上限制父佈局的可視區域。
有人做完這一步看到效果或許就認爲成功了，有人仍看不到效果。問題在於運行環境。
IOS還需要添加“transform: translateY(0);”，這是由於swiper組件在IOS中的層疊關係與其他環境有所差異的問題。
感興趣的讀者可以加個深色背景去品品，會發現swiper組件的樣式其實是正常的，但是組件內的東西就不太聽話了，好像浮在外上層似的。
完整代碼如下：
.swiper-box {
margin: 30rpx;
border-radius: 30rpx;
overflow: hidden;
/* 兼容IOS，否則在swiper組件內的佈局都不受border-radius和overflow的約束 */
transform: translateY(0);
}
.swiper-item {
width: calc(100vw - 60rpx);
height: calc(50vw - 30rpx);
}
.swiper-img {
width: 100%;
height: 100%;
}
最終效果如下：
注意事項：
HBuilderX的內置瀏覽器無法預覽swiper組件添加“border-radius”+“overflow:hidden;”樣式後的效果。