outline-offset
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 | as specified, but with relative lengths converted into absolute lengths |
Animation type | a length |
El espacio será transparente (el elemento padre determinará el fondo).
Sintaxis
/* Valores <length> */
outline-offset: 3px;
outline-offset: 0.2em;
/* Valores globales */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;
Valores
<length>
- La anchura del espacio. Ver
<length>
para unidades posibles. Valores negativos colocan el borde dentro del elemento.
Sintaxis formal
Ejemplos
p {
outline: dashed thin;
/* Mueve el contorno 10px lejos del borde */
outline-offset: 10px;
border:1px solid black;
}
Html
<p>outline: offset 10px. Border is solid and outline is dashed</p>
El código anterior producirá este efecto:
Otro ejemplo:
outline: multiple offsets;
Especificaciones
Especificación | Estado | Comentarios |
---|---|---|
CSS Transitions La definición de 'outline-offset' en esta especificación. |
Working Draft | Define outline-offset como propiedad que se puede animar. |
CSS Basic User Interface Module Level 3 La definición de 'outline-offset' en esta especificación. |
Recommendation | Definición inicial |
Compatibilidad de navegadores
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help! (en-US)
Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.5 (1.8) | Sin soporte | 9.5 | 1.2 |
Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Soporte básico | ? | ? | ? | ? | ? |