Границы
Утилиты для управления отступом контура элемента.
| Class | Styles |
|---|---|
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>Подробнее об использовании вариантов читайте в документации по вариантам.