1. Границы
  2. outline-offset

Границы

outline-offset

Утилиты для управления отступом контура элемента.

ClassStyles
outline-offset-<number>
outline-offset: <number>px;
-outline-offset-<number>
outline-offset: calc(<number>px * -1);
outline-offset-(<custom-property>)
outline-offset: var(<custom-property>);
outline-offset-[<value>]
outline-offset: <value>;

Примеры

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

Используйте утилиты такие как outline-offset-2 и outline-offset-4 для изменения отступа контура элемента:

outline-offset-0

outline-offset-2

outline-offset-4

<button class="outline-2 outline-offset-0 ...">Кнопка A</button><button class="outline-2 outline-offset-2 ...">Кнопка B</button><button class="outline-2 outline-offset-4 ...">Кнопка C</button>

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

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

<div class="outline-offset-[2vw] ...">  <!-- ... --></div>

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

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

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

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

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

<div class="outline md:outline-offset-2 ...">  <!-- ... --></div>

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

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков