box-shadow實現不同角度的投影

先看看看box-shadow的參數說明：

為了實現不同角度的投影，需要藉助四個參數。核心原理是將模糊的距離加大，將陰影的尺寸減小

頂部投影

width: 100px;height: 100px;background: #f1f1f1;margin: 20px ;box-shadow: #000 0 -5px 5px -5px;

右側投影

width: 100px;height: 100px;background: #f1f1f1;margin: 20px ;box-shadow: #000 5px 0 5px -5px;

底部投影

width: 100px;height: 100px;background: #f1f1f1;margin: 20px ;box-shadow: #000 0 5px 5px -5px;

左側投影

width: 100px;height: 100px;background: #f1f1f1;margin: 200px ;box-shadow: #000 -5px 0 5px -5px;

雙邊投影

width: 100px;height: 100px;background: #f1f1f1;margin: 20px ;box-shadow: 5px 0 5px -5px #000,-5px 0 5px -5px #000;

