CSS | Propiedad de desplazamiento de contorno

La propiedad CSS outline-offset establece la cantidad de espacio entre un contorno y el borde o borde de un elemento.

Un contorno es una línea dibujada alrededor de elementos fuera del borde del borde. El espacio entre el elemento y su contorno es transparente. Además, el contorno puede ser no rectangular. El valor predeterminado es 0.

Sintaxis

outline-offset: length|initial|inherit;

Valores de propiedad :

longitud : Es la distancia o el espacio entre el contorno y el borde, es decir, es la distancia entre el contorno y el borde del borde. También puede tener valor negativo. Si la longitud es negativa, el contorno se coloca dentro del elemento. Si la longitud es 0, entonces no hay espacio entre el contorno y el elemento.
sintaxis :

outline-offset: 5px;

Ejemplo 1:

<!DOCTYPE html>
<html>
<head>
    <title>
        outline-offset Property
    </title>
    <style> 
        div {
            margin: 30px;
            border: 2px solid blue;
            background-color: yellow;
            outline: 4px dashed red;
            outline-offset: 15px;
        } 
    </style>
</head>
  
<body>
    <div >GeeksForGeeks</div>
    <br>
</body>
</html>                    

Salida:

Ejemplo 2:

<!DOCTYPE html>
<html>
<head>
    <title>
        outline-offset Property
    </title>
    <style> 
        div {
            margin: 10px;
            border: 2px solid red;
            background-color: blue;
            outline: 4px solid black;
            outline-offset: 5px;
        } 
    </style>
</head>
  
<body>
    <div >GeeksForGeeks</div>
    <br>
</body>
</html>                    

Producción:

initial : Establece la propiedad de desplazamiento de contorno a su valor predeterminado.
sintaxis :

outline-offset: initial;

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        outline-offset Property
    </title>
    <style>
        div {
            margin: 30px;
            border: 2px solid blue;
            background-color: yellow;
            outline: 4px dashed red;
            outline-offset: initial;
        }
    </style>
</head>
  
<body>
    <div>GeeksForGeeks</div>
    <br>
</body>
  
</html> 

Producción:

heredar : el elemento hereda la propiedad de desplazamiento de contorno de su elemento principal.
sintaxis :
```
outline-offset: inherit;
```

Navegadores compatibles: los navegadores compatibles con la propiedad de compensación de contorno se enumeran a continuación:

Google Chrome 4.0
Internet Explorer 15.0
Ópera 10.5
Firefox 3.5
Apple Safari 3.1

Publicación traducida automáticamente

Artículo escrito por Lavisha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta