Deslocamento de contorno CSS

Índice

Deslocamento de contorno CSS

A propriedade outline-offset adiciona espaço entre um contorno e a borda/borda de um elemento. O espaço entre um elemento e seu contorno é transparente.

O exemplo a seguir especifica um contorno de 15px fora da borda:

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

Exemplo

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

Experimente você mesmo →

<!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>

O exemplo a seguir mostra que o espaço entre um elemento e seu contorno é transparente:

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

Exemplo

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

Experimente você mesmo →

<!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 as propriedades de estrutura de tópicos CSS

outline: Uma propriedade abreviada para definir a largura do contorno, o estilo do contorno e cor de contorno em uma declaração
outline-color: Define a cor de um contorno
outline-offset: Especifica o espaço entre um contorno e a borda ou borda de um elemento
outline-style: Define o estilo de um contorno
outline-width: Define a largura de um contorno