CSS Deslocamento do Contorno
A outline-offset
propriedade adiciona espaço entre um contorno e a borda/borda
de um elemento. O espaço entre um elemento e seu contorno é transparente.
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 30px;
border: 3px solid
black;
outline: 2px solid
blue;
outline-offset:20px;
}
</style>
</head>
<body>
<h2>A propriedade de deslocamento de
contorno</h2>
<p>Este parágrafo tem um contorno de 20px fora da
borda da borda.</p>
</body>
</html>
NA PRÀTICA 2
<!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>A propriedade de deslocamento de
contorno</h2>
<p>Este parágrafo tem um contorno de 15px fora da
borda da borda.</p>
</body>
</html>