Definición de .outline-offset aplicado en CSS
La propiedad .outline-offset en CSS compensa un esquema definido desde el borde del borde de un elemento por una cantidad específica. Un esquema, que es diferente de un borde, no ocupa ningún espacio en la página (como un elemento absolutamente posicionado) para que el contorno se pueda compensar en ninguna cantidad y no afectará la posición o el diseño de los elementos circundantes.
Ejemplo de uso de outline-offset
Si quieres utilizar esta propiedad de CSS en tu hoja styles.css, hazlo de esta manera:
.example {
outline: solid 2px blue;
outline-offset: 10px;
}Otro ejemplo más avanzado de .outline-offset es el siguiente de CODEPEN:
Sintaxis de .outline-offset en CSS
outline-offset: length|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| longitud | La distancia a la que se establece el contorno desde el borde del borde. El valor predeterminado es 0 | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .outline-offset
Los números de la tabla detallan la primera versión del navegador que es plenamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
