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

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

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

效果如下：

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

1.swiper组件本身不存在任何属性能实现我们所需要的效果，所以问题的关键还在于样式。 

2.直角是image划出时内容本身形成的，与image的角无关。

3.改变image在滑动过程中的样式是不太实际的，所以需要从父布局入手。

将“border-radius”剪切到“swiper-box”的样式中，并添加“overflow:hidden;”，从根本上限制父布局的可视区域。

有人做完这一步看到效果或许就认为成功了，有人仍看不到效果。问题在于运行环境。

IOS还需要添加“transform: translateY(0);”，这是由于swiper组件在IOS中的层叠关系与其他环境有所差异的问题。

感兴趣的读者可以加个深色背景去品品，会发现swiper组件的样式其实是正常的，但是组件内的东西就不太听话了，好像浮在外上层似的。

完整代码如下：

最终效果如下：

注意事项：

HBuilderX的内置浏览器无法预览swiper组件添加“border-radius”+“overflow:hidden;”样式后的效果。