微信小程序 swiper轮播border-radius滑动时变直角问题

一开始我以为是border-radius属性设置错地方了。于是就全部给他们加上试了一试

html

<swiper class="banner" 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‘’，竟然可以了

.banner {
  height: 163px;
  border-radius: 3px;
  overflow: hidden;
}

 

有兴趣想看效果的如下