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