Box-shadow to achieve different angles of projection

Let's take a look at Box-shadow's parameter description:

To achieve different angles of projection, four parameters are required. The core principle is to increase the blur distance, reducing the size of the shadow

Top projection

Width:100px;height:100px;background: #f1f1f1; margin:20px; Box-shadow: #000 0-5px 5px-5px;

Right projection

Width:100px;height:100px;background: #f1f1f1; margin:20px; Box-shadow: #000 5px 0 5px-5px;

Bottom projection

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

Left projection

Width:100px;height:100px;background: #f1f1f1; margin:200px; Box-shadow: #000 -5px 0 5px-5px;

Bilateral projection

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

