CSS3 box-shadow三边阴影等宽、两对边阴影等宽

在学习vue的时，想要做一个小工具，但过程中要做一个顶部无阴影，其他三边阴影等宽的效果。
怎么弄都是两边等宽，且下面比两边要宽：

代码如下：

box-shadow:0 5px 10px #222;

后来才知道CSS3的阴影是可以叠加的，只需要把超出的部分用白色阴影挡住就行了：

代码如下：

box-shadow:0 5px 0px #fff, 0 5px 10px #666;

但阴影顺序不同，效果也不一样（调换顺序）：

代码如下：

box-shadow:0 5px 10px #666,0 5px 0px #fff;

同理，对边阴影等宽也能这样实现，只需要白色阴影平移等大间距即可：
（由于顶部有灰色色块，故将左右阴影覆盖，保留上下阴影效果更直观。）

代码如下：

box-shadow:10px 0 0px 0px #fff, 5px 0 10px #666;

萌新第一次投稿，如有错误欢迎指出，若文章写的不好欢迎提出你的建议或意见，不过还请各位大佬下手轻点（QAQ）。