用伪元素做图片的底部阴影效果

我司的 UI 虽然不是 处女座，但认（挑）真（剔）程度也与之不相上下了。作为一枚前端，当然也不好意思掉链子，所以在 UI 小哥的督促下，会最大可能地完美实现视觉稿。于是乎，一些本来一行实现的东西，为了效果美观，会用更多代码做得更加细致。

上效果：

UI 要求是，底部阴影宽度比图片的宽度略小，然后整体是个轮播效果，每张图片的阴影颜色不一样。

假设图片的容器为banner, 为了减少html上的节点，尽量用伪元素来做。由于层级嵌套的关系，不能直接把图片盖在阴影上，所以要有两个伪元素，一个before用于生成阴影， 一个after用于放背景图片。后者的z-index要高于前者。

按这个思路写mixin

@mixin banner($shadowcolor,$bannerpic){
   
   
    width: 92%;
    height: 32vw;