小程序swiper图片修改为圆角，费老大劲了

在小程序开发中我遇到要把小程序中的swiper中的图片做出圆角的效果看着好看点，可是直接加属性根本不行。后来在网上查了很多资料才改好，今天发出来给兄弟们看一下（我是后端不太懂前端勿喷），废话不多直接上代码直接拿走不用客气

xml代码：

<swiper class="swiper-box" indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{top_data}}" wx:key="index" wx:for-item="top">
            <swiper-item  class="swiper-item">
                <image class="swiper-img" src="{{top.img}}"></image>
            </swiper-item>
        </block>
</swiper>

css代码：

/* 这是主页轮播图样式 */
.swiper-box {
    margin: 30rpx;
    border-radius: 18rpx;
    overflow: hidden;
    /* 兼容IOS，否则在swiper组件内的布局都不受border-radius和overflow的约束 */
    transform: translateY(0);
}
.swiper-item {
    width: calc(100vw - 60rpx);
    height: calc(50vw - 30rpx);
}
.swiper-img {
    width: 100%;
    height: 100%;
}