box-shadow

Примеры

Базовый пример

Используйте утилиты вроде shadow-sm и shadow-lg для применения внешних теней разного размера к элементу:

<div class="shadow-md ..."></div><div class="shadow-lg ..."></div><div class="shadow-xl ..."></div>

Изменение непрозрачности

Используйте модификатор непрозрачности, чтобы настроить непрозрачность тени блока:

<div class="shadow-xl ..."></div><div class="shadow-xl/20 ..."></div><div class="shadow-xl/30 ..."></div>

По умолчанию непрозрачность теней довольно низкая (25% или меньше), поэтому увеличение непрозрачности (примерно до 50%) сделает тени более выраженными.

Установка цвета тени

Используйте утилиты вроде shadow-indigo-500 и shadow-cyan-500/50 для изменения цвета тени:

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Подписаться</button><button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Подписаться</button><button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Подписаться</button>

По умолчанию цветные тени имеют непрозрачность 100%, но вы можете настроить это с помощью модификатора прозрачности.

Добавление внутренней тени

Используйте утилиты вроде inset-shadow-xs и inset-shadow-sm для применения внутренней тени к элементу:

<div class="inset-shadow-2xs ..."></div><div class="inset-shadow-xs ..."></div><div class="inset-shadow-sm ..."></div>

Вы можете настроить непрозрачность вложенной тени с помощью модификатора непрозрачности, например inset-shadow-sm/50. Непрозрачность вложенной тени по умолчанию довольно низкая (5%), поэтому увеличение непрозрачности (например, до 50%) сделает вложенные тени более выраженными.

Установка цвета внутренней тени

Используйте утилиты вроде inset-shadow-indigo-500 и inset-shadow-cyan-500/50 для изменения цвета внутренней тени:

<div class="inset-shadow-sm inset-shadow-indigo-500 ..."></div><div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>

По умолчанию цветные тени имеют непрозрачность 100%, но вы можете настроить это с помощью модификатора прозрачности.

Добавление кольца

Используйте ring или ring-<number> утилиты вроде ring-2 и ring-4 для применения сплошной тени-кольца к элементу:

<button class="ring ...">Подписаться</button><button class="ring-2 ...">Подписаться</button><button class="ring-4 ...">Подписаться</button>

По умолчанию кольца соответствуют currentColor элемента, к которому они применяются.

Установка цвета кольца

Используйте утилиты вроде ring-indigo-500 и ring-cyan-500/50 для изменения цвета кольца:

<button class="ring-2 ring-blue-500 ...">Подписаться</button><button class="ring-2 ring-blue-500/50 ...">Подписаться</button>

По умолчанию кольца имеют непрозрачность 100%, но вы можете настроить это с помощью модификатора прозрачности.

Добавление внутреннего кольца

Используйте inset-ring или inset-ring-<number> утилиты вроде inset-ring-2 и inset-ring-4 для применения сплошной внутренней тени-кольца к элементу:

<button class="inset-ring ...">Подписаться</button><button class="inset-ring-2 ...">Подписаться</button><button class="inset-ring-4 ...">Подписаться</button>

По умолчанию внутренние кольца соответствуют currentColor элемента, к которому они применяются.

Установка цвета внутреннего кольца

Используйте утилиты вроде inset-ring-indigo-500 и inset-ring-cyan-500/50 для изменения цвета внутреннего кольца:

<button class="inset-ring-2 inset-ring-blue-500 ...">Подписаться</button><button class="inset-ring-2 inset-ring-blue-500/50 ...">Подписаться</button>

По умолчанию внутренние кольца имеют непрозрачность 100%, но вы можете настроить это с помощью модификатора прозрачности.

Удаление тени

Используйте утилиты shadow-none, inset-shadow-none, ring-0 и inset-ring-0 для удаления существующей тени элемента:

<div class="shadow-none ..."></div>

Использование пользовательского значения

Используйте такие утилиты, как shadow-[<value>],inset-shadow-[<value>],ring-[<value>], and inset-ring-[<value>], чтобы задать box shadow на основе полностью пользовательского значения:

<div class="shadow-[0_35px_35px_rgba(0,0,0,0.25)] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: shadow-(<custom-property>)

<div class="shadow-(--my-shadow) ...">  <!-- ... --></div>

Это просто сокращение, shadow-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a box-shadow утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="shadow-none md:shadow-lg ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.

Кастомизация вашей темы

Настройка теней

Используйте переменные темы --shadow-* для настройки утилит box shadow в вашем проекте:

@theme {  --shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); }

Теперь утилиту shadow-3xl можно использовать в вашей разметке:

<div class="shadow-3xl">  <!-- ... --></div>

Подробнее о настройке темы читайте в документации темы.

Настройка внутренних теней

Используйте переменные темы --inset-shadow-* для настройки утилит inset box shadow в вашем проекте:

@theme {  --inset-shadow-md: inset 0 2px 3px rgba(0, 0, 0, 0.25); }

Теперь утилиту inset-shadow-md можно использовать в вашей разметке:

<div class="inset-shadow-md">  <!-- ... --></div>

Подробнее о настройке темы читайте в документации темы.

Настройка цветов теней

Используйте переменные темы --color-* для настройки утилит color в вашем проекте:

@theme {  --color-regal-blue: #243c5a; }

Теперь утилиты типа shadow-regal-blue,inset-shadow-regal-blue,ring-regal-blue, and inset-ring-regal-blue можно использовать в вашей разметке:

<div class="shadow-regal-blue">  <!-- ... --></div>

Подробнее о настройке темы читайте в документации темы.