细抠swiper间隙问题

官网移动端大致写完后开始抠细节，发现设计师给出了一个swiper—slide加阴影的效果，设计图如下所示：

理所当然的重拳出击，给两端加padding，然后变成了下面这个狗样子……

理所当然的就被设计师驳回了，只能默默找原因和解决办法。
原因很简单，padding加在最外层container上，而swiper组件往里一直到图片，足有7层，虽然padding不会削掉自身的阴影，但是里层盒子会被外层给削掉，造成这种尴尬的断层感，果断把最外层设置为宽度100%。

那要实现间隔效果，直接想到swiper里有一个spaceBetween属性，但是这个属性是给swiper—slide加上margin—right属性，而且单位只有“px”，我写移动端用的是“vw”单位，所以给定值不行；百度说给“auto”值，swiper—slide加margin属性可以解决，实践了一下发现轮播图不能拖动了，果断放弃另找出路。

既然swiper解决不了这个事儿，还是得从padding、margin和width里找方法，直接找到swiper—slide设置宽度和居中，发现阴影位置跑到了小图下方——高度不对，一通改改改之后，不但没达到效果，小图也变形了……另想办法设置盒子绝对定位加阴影，不管怎么加z—index，不是大图不见 就是阴影不见，只能一顿撤回。

最后是把宽度和阴影都加在img上，其余宽度都设为100vw，关闭spaceBetween属性，效果图才出来，写出来之后哭笑不得，明明是最简单的方法却兜转了一大圈，不过好歹效果出来了，虽然最后的解决办法很基础，中间的心路历程还是蛮艰辛的，果然经验还是要慢慢积累，从一次次掉坑爬坑中吸取经验顽强成长吧。。