美文网首页
2019-03-18设置border-radius圆角失败

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

作者: Kason晨 | 来源:发表于2019-03-18 17:03 被阅读0次

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

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


相关文章

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

    要给轮播图设置圆角,不滚动的时候还好,一但滚动圆角就无效了。 注意4个角 一开始我以为是border-radius...

  • 京东项目中css的一些属性

    1)设置圆角border-radius border-radius: 50%; 2)设置元素的堆叠顺序1,z-in...

  • CSS3边框

    圆角边框border-radius border-radius属性值的4种写法1、border-radius设置1...

  • 边框相关样式

    border-radius(边框圆角) 该属性用于设置边框圆角,属性值为圆角半径,当设置一个时为值为四个角的圆角半...

  • 前端——动画

    CSS3 border-radius设置圆角 box-shadow设置阴影 transition动画 transi...

  • CSS3之圆角和阴影

    1.圆角 border-radius:可设置四个方向上不同圆角 2.阴影 box-shadow:可设置单边阴影效果...

  • 前端 动画

    css3过渡动画 border-radius 设置元素变成圆角transition 设置动画 4个属性ease 慢...

  • js 高德地图sdk 设置地图容器圆角

    问题:移动web在给地图设置圆角 border-radius: 8px;时发现在Android端正常圆角,但在iO...

  • 前端培训机构—css源码笔记(三)

    一、边框拓展 设置边框圆角 border-radius 边框折叠 border-collapse: collaps...

  • 前端09

    过渡动画 transition产生动画border-radius圆角设置过渡的时间:transition-dura...

网友评论

      本文标题:2019-03-18设置border-radius圆角失败

      本文链接:https://www.haomeiwen.com/subject/sqjbmqtx.html