前几天设计师提了个需求，如下要实现这种三边阴影的效果。

三边的阴影长度要一样。上面还要有个被截掉的效果。

最初的实现

首先当然是看看原生的box-shadow能不能实现了

使用box-shadow的y偏移量来实现。不过这样导致下面的阴影变长了，而且上面的截断效果不明显。不是个好的解决方法。

使用外层wrap一个容器的方式

通过在外面包裹一层，用来截断上面的阴影。效果是最明显的，可是总觉得不大优雅

使用before元素做阴影。

团队里的大牛给了另一个解决方案，使用before一个空元素来做阴影，对阴影向上偏移，达到三边相等的目的。不过截断还不是特别明显，不过不用增加新元素，代码优雅多了

后面两种方式各有优劣，因为设计师比较在意细节，后面还是采用了第二种。有时，总是需要做出牺牲。