Самое интересное применение теней — это рисование. Умельцы создают сложнейшие изображения с помощью теней. Мы тоже создадим не очень сложную, но узнаваемую картинку на чистом CSS.

В исходном коде уже есть заготовка — скруглённый элемент с размерами 100 на 100 пикселей без рамок и фона. Тени имеют тот же размер и форму, что и их родительский элемент, поэтому добавляемые нами тени будут круглыми.

Перед началом пара замечаний:

1. Если какой-то параметр тени не указан, значит он равен 0.
2. Необязательно задавать все варианты свойства box-shadow (префиксованные и нет). Используйте тот вариант, который работает в вашем браузере (серверная проверка использует вариант без префикса).