CSS3box-shadow三边阴影等宽、两对边阴影等宽
在学习vue的时，想要做⼀个⼩⼯具，但过程中要做⼀个顶部⽆阴影，其他三边阴影等宽的效果。
怎么弄都是两边等宽，且下⾯⽐两边要宽：
box shadow怎么设置代码如下：
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）。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。