码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2021-06-02 15:49:08      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:rgb   idt   开始   top   inter   微信   src   div   height   

一开始我以为是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滑动时变直角问题

标签:rgb   idt   开始   top   inter   微信   src   div   height   

原文地址:https://www.cnblogs.com/QW-lzm/p/14825554.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!