一开始我以为是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;
}
有兴趣想看效果的如下
微信小程序 swiper轮播border-radius滑动时变直角问题
原文：https://www.cnblogs.com/QW-lzm/p/14825554.html