Contorno e Sombra da Caixa
Adicione contornos de foco e efeitos de sombra ao redor dos elementos usando outline e box-shadow.
Contorno e Sombra da Caixa é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Propriedade outline
outline desenha uma linha fora da borda. Ela não afeta o layout: os elementos ao redor não se deslocam. O formato abreviado é semelhante ao de border: largura, estilo e cor.
<button class="focus-demo">Focused Button</button>
outline-offset
outline-offset afasta o contorno da borda. Valores positivos o empurram para fora; valores negativos o movem para dentro, criando um efeito de recorte.
<button class="focus-demo">Keyboard-focused Button</button>
outline versus border
Principais diferenças:
- O contorno não afeta o fluxo do layout
- O contorno não pode ser definido por lado, pois não existe outline-top
- O contorno pode não ser retangular, acompanhando o formato dos anéis de foco em alguns navegadores
- O contorno fica sempre fora da borda
:focus-visible versus :focus
Prefira :focus-visible para os anéis de foco do teclado. O contorno é exibido somente quando o foco foi recebido pelo teclado, não por um clique do mouse, evitando ruído visual para usuários do mouse e preservando a acessibilidade.
<button class="focus-demo">Keyboard focus vs mouse click</button>
Noções básicas de box-shadow
box-shadow adiciona um efeito de sombra ao redor de um elemento. O formato abreviado é: deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de expansão e cor.
<div class="card">Card with soft shadow</div>
Valores de box-shadow explicados
Cada valor de box-shadow:
- offset-x: deslocamento horizontal (negativo = esquerda)
- offset-y: deslocamento vertical (negativo = para cima)
- blur-radius: suavidade (0 = nítida)
- spread-radius: aumenta ou reduz o tamanho da sombra
- color: cor da sombra (RGBA recomendado)
<div class="raised">Raised</div>
<div class="deep">Deep</div>
Sombra interna com inset
Adicione a palavra-chave inset para desenhar a sombra dentro do elemento, criando uma aparência pressionada ou rebaixada.
<input class="input focus-demo" type="text" value="Focused input" />
Várias sombras de caixa
Separe várias sombras com vírgulas. Elas são empilhadas da frente para trás:
<span class="badge">3</span>
box-shadow versus filter: drop-shadow
box-shadow considera apenas o formato da caixa. filter: drop-shadow() acompanha o formato renderizado, incluindo a transparência, sendo ideal para ícones PNG com fundos transparentes.
<div class="icon">★</div>
Sistema de elevação com box-shadow
O Material Design e sistemas semelhantes definem vários níveis de sombra para representar a elevação visual. Mapeie variáveis CSS para valores de sombra:
<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>
Animando box-shadow com eficiência
Animar box-shadow dispara um redesenho a cada quadro. Para obter melhor desempenho, anime opacity de um pseudo-elemento de sombra ou use filter: drop-shadow(), que pode ser composto.
Verificação rápida
Qual palavra-chave de box-shadow desenha a sombra dentro do elemento?
Recapitulação
outline desenha fora da borda sem afetar o layout — use-o para indicadores de foco. box-shadow adiciona sombras de profundidade com deslocamento, desfoque, expansão e cor. Use inset para sombras internas. Várias sombras podem ser sobrepostas com vírgulas.
Perguntas Frequentes
A aula “Contorno e Sombra da Caixa” é grátis?
Sim — o texto completo de “Contorno e Sombra da Caixa” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Contorno e Sombra da Caixa”?
Adicione contornos de foco e efeitos de sombra ao redor dos elementos usando outline e box-shadow. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Contorno e Sombra da Caixa”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Compreendendo Largura, Altura, Margem e Preenchimento
- Estilos, Largura e Cor das Bordas
- Box-Sizing: Content-Box vs Border-Box
- Contorno e Sombra da Caixa