2019-03-18设置border-radius圆角失败

2019-03-18  本文已影响0人  Kason晨

要给轮播图设置圆角,不滚动的时候还好,一但滚动圆角就无效了。

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


上一篇 下一篇

猜你喜欢

热点阅读