Украшение коробки

​

Основы использования

​

Установка разрыва украшения коробки

Используйте утилиты box-decoration-slice и box-decoration-clone для управления отображением таких свойств, как background, border, border-image, box-shadow, clip-page, margin и padding, как если бы элемент были одним непрерывным фрагментом или отдельными блоками.

<span class="box-decoration-slice bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 ...">
  Привет<br>
  Мир
</span>
<span class="box-decoration-clone bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 ...">
  Привет<br>
  Мир
</span>

​

Применяя условно

​

Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:box-decoration-slice, чтобы применять утилиту box-decoration-slice только при hover.

<div class="box-decoration-clone hover:box-decoration-slice">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:box-decoration-slice, чтобы применить утилиту box-decoration-slice только на экранах среднего размера и выше.

<div class="box-decoration-clone md:box-decoration-slice">
  <!-- ... -->
</div>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.