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新技能，两个属性还能这样配合。