La outline-offsetpropiedad en CSS desplaza un contorno definido desde el borde del borde de un elemento en una cantidad específica. Un contorno, que es diferente de un borde, no ocupa ningún espacio en la página (como un elemento absolutamente posicionado) por lo que el contorno se puede desplazar en cualquier cantidad y no afectará la posición o el diseño de los elementos circundantes.
.example ( outline: solid 2px blue; outline-offset: 10px; )Los contornos definidos mediante la outlinepropiedad se utilizan a menudo como anillos de enfoque, por motivos de accesibilidad. Por lo tanto, la outline-offsetpropiedad le permite cambiar la posición del anillo de enfoque.
Valores
outline-offset acepta un tipo de valor, una longitud, que puede ser:
0(el valor por defecto)- Cualquier otra longitud válida con una unidad especificada (incluidos los valores negativos)
Tenga en cuenta que outline-offset, como outline-width, no acepta valores porcentuales.
Posicionamiento del contorno
Por defecto, el contorno de un elemento se dibuja inmediatamente fuera del borde (o inmediatamente fuera de donde se dibujaría el borde si se definiera un borde). Por lo tanto, es técnicamente posible combinar el contorno y el borde para obtener un efecto de dos bordes:
Desde allí, outline-offsetse puede utilizar para cambiar la posición del contorno en relación con el borde del borde. Pruebe la demostración a continuación, que le permite cambiar de forma interactiva el valor de compensación del contorno utilizando el control deslizante. El valor del desplazamiento se muestra en la página a medida que mueve el control deslizante:
Como se mencionó anteriormente, outline-offsetacepta valores negativos, que compensarán el contorno en la dirección opuesta (hacia el centro del elemento), como se muestra en la siguiente demostración interactiva. Observe que el contorno comienza en -40px:
Si ve la demostración anterior en Firefox, notará que el contorno parece correcto al principio, pero cuando se ajusta el control deslizante, el contorno no se procesa suavemente y termina en la posición incorrecta. Desplazar el elemento fuera de la vista y luego volverlo a ver obliga al navegador a volver a pintar el contorno en la posición correcta. Este parece ser un error exclusivo de Firefox.
No es parte de outlinetaquigrafía
Similar a la borderpropiedad, la outlinepropiedad es una abreviatura que representa tres propiedades: outline-color, outline-style, y outline-width.
Por lo outline-offsettanto, la propiedad no está representada en esta ni en ninguna otra propiedad abreviada, por lo que debe declararse por separado del esquema definido en sí.
Relacionado
- contorno
- frontera
Más información
- offset de contorno en W3C
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
El indicador "parcial" para IE significa que IE no admite outline-offset, pero sí admite outlinetaquigrafía y las tres propiedades que representa.
Además del error mencionado anteriormente en la sección "Posicionamiento del esquema", hay un error en Firefox donde el esquema se dibuja incorrectamente si el elemento tiene un elemento secundario que desborda el límite principal (por ejemplo, usando márgenes negativos o posicionamiento absoluto) . Por lo tanto, el outline-offsetvalor será relativo al límite extendido creado por el elemento secundario desbordado, en lugar de los límites del elemento principal original. Para entender esto mejor, vea este CodePen, este hilo de Stack Overflow y este informe de error (crédito al lector Matt Vanes por enviar este error).