Управляя различными селекторами и свойствами, вы можете создавать интересные формы. Один из самых простых вариантов - это форма полумесяца. Для решения этой задачи вам необходимо работать со свойством box-shadow, которое устанавливает тень элемента, а также со свойством border-radius, которое контролирует округлость углов элемента.
Вы создадите круглый прозрачный объект с четкой тенью, которая немного смещена в сторону - тень на самом деле будет формой луны, которую вы видите.
Чтобы создать круглый объект, для свойства border-radius должно быть установлено значение 50%.
Вы можете вспомнить из более ранней задачи, что свойство box-shadow принимает значения для offset-x, offset-y, blur-radius, spread-radius и значение цвета в указанном порядке. Значения blur-radius и spread-radius необязательны.
Задание:
Измените квадрат таким образом, чтобы он принял форму луны. Для этого:
- Значение свойства background-color должно быть прозрачным (transparent).
- Значение свойства border-radius должно быть установлено на 50%.
- Значение свойства box-shadow должно быть установлено на 25 пикселей для offset-x, 10 пикселей для offset-y, 0 для blur-radius, 0 для spread-radius и, наконец, blue для цвета.
