box-shadow implementiert die Projektion aus verschiedenen Winkeln

Werfen wir zunächst einen Blick auf die Parameterbeschreibung von Box-Shadow:

Um eine Projektion in verschiedenen Winkeln zu erreichen, werden vier Parameter benötigt. Das Grundprinzip besteht darin, den Unschärfeabstand zu vergrößern und die Größe des Schattens zu verringern

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

Untenprojektion

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

Linksprojektion

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

Bilaterale Projektion