outline-offset
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde abril de 2017.
Resumen
La propiedad CSS outline-offset es usada para establecer el espacio entre un contorno outline y el límite o borde de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites de su borde.
| Valor inicial | 0 |
|---|---|
| Applies to | all elements |
| Heredable | no |
| Valor calculado | the absolute <length>, snapped as a line width |
| Animation type | a length |
El espacio será transparente (el elemento padre determinará el fondo).
Sintaxis
css
/* Valores <length> */
outline-offset: 3px;
outline-offset: 0.2em;
/* Valores globales */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;
Valores
Sintaxis formal
outline-offset =
<length>
Ejemplos
css
p {
outline: dashed thin;
/* Mueve el contorno 10px lejos del borde */
outline-offset: 10px;
border: 1px solid black;
}
Html
html
<p>outline: offset 10px. Border is solid and outline is dashed</p>
El código anterior producirá este efecto:
Otro ejemplo
Especificaciones
| Especificación |
|---|
| CSS Basic User Interface Module Level 4 # outline-offset |