Bordes
Utilidades para controlar el desplazamiento del contorno de un elemento.
| Clase | Estilos |
|---|---|
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>; |
Utiliza utilidades como outline-offset-2 y outline-offset-4 para cambiar el desplazamiento del contorno de un elemento:
outline-offset-0
outline-offset-2
outline-offset-4
<button class="outline-2 outline-offset-0 ...">Botón A</button><button class="outline-2 outline-offset-2 ...">Botón B</button><button class="outline-2 outline-offset-4 ...">Botón C</button>Usa la sintaxis outline-offset-[<value>] para establecer el/la desplazamiento del contorno basándose en un valor completamente personalizado:
<div class="outline-offset-[2vw] ..."> <!-- ... --></div>Para variables CSS, también puedes usar la sintaxis outline-offset-(<custom-property>) :
<div class="outline-offset-(--my-outline-offset) ..."> <!-- ... --></div>Esto es solo un atajo para outline-offset-[var(<custom-property>)] que añade la función var() por ti automáticamente.
Antepone a la utilidad outline-offset el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="outline md:outline-offset-2 ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.