<p>Тень блока (box shadow) в CSS - это эффект, позволяющий добавить блокам на веб-странице теневой эффект. Этот эффект придает элементам трехмерный вид и помогает создавать глубину и объем.</p>
<p>Синтаксис свойства box shadow выглядит следующим образом:</p>
<pre class="highlight"><code class="language-css">box-shadow: горизонтальное смещение вертикальное смещение размытие распределение цвет inset;</code></pre>
<p>Где каждая часть имеет свое значение:</p>
<ul>
<li>Горизонтальное смещение (horizontal offset) - определяет горизонтальное расстояние, на которое тень должна смещаться от элемента. Значение может быть положительным или отрицательным. Задается в пикселях (px), процентах (%) или других доступных единицах измерения.</li>
<li>Вертикальное смещение (vertical offset) - определяет вертикальное расстояние, на которое тень должна смещаться от элемента. Значение может быть положительным или отрицательным. Задается также в пикселях (px), процентах (%) или других единицах измерения.</li>
<li>Размытие (blur) - указывает на степень размытия тени. Чем больше значение, тем более размытой будет тень. Значение должно быть положительным и задается также в пикселях (px), процентах (%) или других единицах измерения.</li>
<li>Распределение (spread) - определяет распределение тени вокруг элемента. Положительное значение будет расширять тень во всех направлениях, отрицательное - сжимать ее. Также задается в пикселях (px), процентах (%) или других единицах измерения.</li>
<li>Цвет (color) - определяет цвет тени. Может быть задан как ключевое слово (например, black для черной тени), шестнадцатеричный код (#000000) или имя цвета (например, red для красной тени).</li>
<li>Inset - необязательное значение, устанавливает тень внутри элемента. Если указано ключевое слово "inset", тень будет отображаться внутри элемента, в противном случае она будет отображаться снаружи.</li>
</ul>
<p>Давайте рассмотрим несколько примеров использования свойства box shadow:</p>
<ol>
<li>Простая тень:</li>
<pre class="highlight"><code class="language-css">.box {
box-shadow: 2px 2px 4px #000000;
}</code></pre>
<li>Множественные тени:</li>
<pre class="highlight"><code class="language-css">.box {
box-shadow: 2px 2px 4px #000000, -2px -2px 4px #ffffff;
}</code></pre>
<li>Тень внутри элемента:</li>
<pre class="highlight"><code class="language-css">.box {
box-shadow: inset 0 0 10px #000000;
}</code></pre>
</ol>
<p>Конечно, вы можете комбинировать различные значения и создавать свои уникальные тени, а также использовать анимации и переходы для создания дополнительных эффектов. Это всего лишь некоторые примеры использования свойства box shadow, и его возможности ограничены только вашей фантазией и требованиями дизайна вашего сайта.</p>