O contorno (outline) em CSS é uma propriedade que permite adicionar uma linha ao redor de um elemento HTML. Ele é semelhante à propriedade de borda (border), mas não afeta o layout da caixa do elemento, ou seja, não ocupa espaço adicional. Aqui estão alguns exemplos de como usar a propriedade outline em CSS:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.outlined-element {
width: 100px;
height: 50px;
background-color: #f0f0f0;
outline: 2px solid #3498db; /* Define uma linha azul ao redor do elemento */
}
</style>
</head>
<body>
<div class="outlined-element">Contorno</div>
</body>
</html>
Neste exemplo, a classe .outlined-element representa um elemento <div> com largura, altura e cor de fundo definidos. A propriedade outline é usada para adicionar um contorno de 2 pixels de largura e cor azul ao redor do elemento.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.outlined-element {
width: 100px;
height: 50px;
background-color: #f0f0f0;
outline: 2px dotted #e74c3c; /* Contorno pontilhado vermelho */
}
</style>
</head>
<body>
<div class="outlined-element">Contorno</div>
</body>
</html>
Neste exemplo, o contorno é definido como pontilhado (dotted) e tem uma cor vermelha.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.outlined-element {
width: 100px;
height: 50px;
background-color: #f0f0f0;
outline: 2px solid #3498db; /* Contorno azul por padrão */
}
.outlined-element:focus {
outline: none; /* Remove o contorno ao focar no elemento */
}
</style>
</head>
<body>
<div tabindex="0" class="outlined-element">Contorno</div>
</body>
</html>
Neste exemplo, o contorno é removido quando o elemento recebe foco. A pseudoclasse :focus é usada para estilizar o elemento quando ele está em foco.
Esses são apenas exemplos básicos, e há muitas outras propriedades e valores que podem ser utilizados com a propriedade outline para personalizar ainda mais o contorno de um elemento em CSS.