Desplazamiento del esquema CSS

Tabla de contenido

Desplazamiento del esquema CSS

La propiedad outline-offset agrega espacio entre un contorno y el borde/borde de un elemento. El espacio entre un elemento y su contorno es transparente.

El siguiente ejemplo especifica un contorno de 15 píxeles fuera del borde del borde:

This paragraph has an outline 15px outside the border edge.

Ejemplo

 p {
  margin: 30px;
  border: 1px solid black;
  outline: 
  1px solid red;
  
  outline-offset: 15px;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>

<h2>The outline-offset Property</h2>

<p>This paragraph has an outline 15px outside the border edge.</p>

</body>
</html>

El siguiente ejemplo muestra que el espacio entre un elemento y su contorno es transparente:

This paragraph has an outline of 15px outside the border edge.

Ejemplo

 p {
  margin: 30px;
  background: 
  yellow;
  border: 1px solid black;
  outline: 
  1px solid red;
  
  outline-offset: 15px;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  background:yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>

<h2>The outline-offset Property</h2>

<p>This paragraph has an outline of 15px outside the border edge.</p>

</body>
</html>

Todas las propiedades del esquema CSS

outline: Una propiedad abreviada para establecer el ancho del contorno, el estilo del contorno y color de contorno en una declaración
outline-color: Establece el color de un contorno.
outline-offset: Especifica el espacio entre un contorno y el borde o borde de un elemento
outline-style: Establece el estilo de un esquema.
outline-width: Establece el ancho de un contorno.