swiper輪播border-radius滑動時變直角問題

要給輪播圖設置圓角，不滾動的時候還好，一但滾動圓角就無效了。

注意4個角

注意4個角

一開始我以爲是border-radius屬性設置錯地方了。於是就全部給他們加上試了一試。
WXML:

<swiper indicator-dots="true" autoplay="true" interval="1600" duration="1000" circular="true" indicator-color="#95A6BC" indicator-active-color="#fff">
    <swiper-item>
        <image class='item-img' src='/KO/img/img.png'></image>
    </swiper-item>
    <swiper-item>
        <image class='item-img' src='/KO/img/img.png'></image>
    </swiper-item>
    <swiper-item>
        <image class='item-img' src='/KO/img/img.png'></image>
    </swiper-item>
</swiper>

CSS:

swiper{
    border-radius: 10rpx;
    margin: 30rpx 30rpx;
    /* overflow: hidden; */
}
swiper-item{
    width: 100%;
    border-radius: 10rpx;
}
.item-img{
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
}

結果還是不行，

後來我機智的小腦袋決定給給最外面盒子加上“overflow: hidden”試試，

竟然成功了，

 

GET新技能，兩個屬性還能這樣配合。