swiper的item为圆角，在滑动切换的过程中出现直角（保持圆角）的解决方案

问题复现：

先贴一下我的布局代码，为防止其他干扰，代码只含有必要内容。

<template>
	<view>
		<swiper class="swiper-box" :autoplay="true" :circular="true">
			<swiper-item class="swiper-item" v-for="(item, index) in urls" :key="index">
				<image class="swiper-img" :src="item"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

CSS代码如下：注意“border-radius”样式，很多人通常会直接加在image组件上，因为这样可以立现我们所需要的效果。

.swiper-box {
	margin: 30rpx;
}
.swiper-item {
	width: calc(100vw - 60rpx);
	height: calc(50vw - 30rpx);
}
.swiper-img {
	width: 100%;
	height: 100%;
	border-radius: 30rpx;
}

效果如下：

但在滑动切换过程中我们会发现四个角仍是直角，而且衔接处是圆角，对于有强迫症的人来说是无法忍受的！