要给轮播图设置圆角,不滚动的时候还好,一但滚动圆角就无效了。
注意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新技能,两个属性还能这样配合。
网友评论