HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutorial de CSS

CSS INÍCIO Introdução CSS Sintaxe CSS Seletores CSS CSS Como fazer Comentários CSS Cores CSS
Colors RGB HEX HSL
Planos de fundo CSS
Background Color Background Image Background Repeat Background Attachment Background Shorthand
Bordas CSS
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
Margens CSS
Margins Margin Collapse
Preenchimento CSS CSS Altura/Largura Modelo de caixa CSS Esboço CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Texto CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Fontes CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ícones CSS Links CSS Listas CSS Tabelas CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Exibição CSS Largura máxima do CSS Posição CSS Índice Z CSS Estouro de CSS CSS flutuante
Float Clear Float Examples
Bloco CSS Inline Alinhamento CSS Combinadores CSS Pseudoclasse CSS Pseudoelemento CSS Opacidade CSS Barra de navegação CSS
Navbar Vertical Navbar Horizontal Navbar
Listas suspensas de CSS Galeria de imagens CSS Sprites de imagem CSS Seletores de atributos CSS Formulários CSS Contadores CSS Layout do site CSS Unidades CSS Especificidade CSS CSS !importante Funções matemáticas CSS

CSS Avançado

Cantos arredondados CSS Imagens de borda CSS Planos de fundo CSS Cores CSS Palavras-chave de cores CSS Gradientes CSS
Linear Gradients Radial Gradients Conic Gradients
Sombras CSS
Efeitos de sombra Sombra da caixa
Efeitos de texto CSS Fontes da Web CSS Transformações CSS 2D Transformações CSS 3D Transições CSS Animações CSS Dicas de CSS Imagens de estilo CSS Reflexão de imagem CSS Ajuste de objeto CSS posição do objeto CSS Mascaramento CSS Botões CSS Paginação CSS CSS Múltiplas Colunas Interface de usuário CSS Variáveis ​​CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Dimensionamento da caixa CSS Consultas de mídia CSS Exemplos de CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

Responsivo a CSS

Introdução ao RWD Janela de visualização RWD Visualização de Grade RWD Consultas de mídia RWD Imagens RWD Vídeos RWD Estruturas RWD Modelos RWD

Grade CSS

Introdução à grade Contêiner de Grade Item de grade

CSS SASS

Tutorial SASS

Exemplos de CSS

Modelos CSS Exemplos de CSS teste css Exercícios de CSS Certificado CSS

Referências CSS

Referência CSS Seletores CSS Funções CSS Aural de referência CSS Fontes CSS seguras para a Web CSS Animatable Unidades CSS CSS PX-EM Converter Cores CSS Valores de cores CSS Valores padrão de CSS Suporte ao navegador CSS

Sombra de caixa CSS

❮ Anterior Próximo ❯

Propriedade CSS box-shadow

A propriedade CSS box-shadowé usada para aplicar uma ou mais sombras a um elemento.

Especificar uma sombra horizontal e vertical

Em seu uso mais simples, você especifica apenas uma sombra horizontal e uma vertical. A cor padrão da sombra é a cor do texto atual.

Um elemento <div> com um box-shadow

Exemplo

Especifique uma sombra horizontal e vertical:

div {
  box-shadow: 10px 10px;
}

Especifique uma cor para a sombra

O colorparâmetro define a cor da sombra.

Um elemento <div> com uma sombra de caixa cinza

Exemplo

Especifique uma cor para a sombra:

div {
  box-shadow: 10px 10px grey;
}

Adicione um efeito de desfoque à sombra

O blurparâmetro define o raio de desfoque. Quanto maior o número, mais borrada será a sombra.

Um elemento <div> com uma sombra de caixa cinza desfocada de 5px

Exemplo

Adicione um efeito de desfoque à sombra:

div {
  box-shadow: 10px 10px 5px grey;
}

Definir o raio de propagação da sombra

O spreadparâmetro define o raio de dispersão. Um valor positivo aumenta o tamanho da sombra, um valor negativo diminui o tamanho da sombra.

Um elemento <div> com uma sombra de caixa cinza desfocada, com um raio de propagação de 12px

Exemplo

Defina o raio de propagação da sombra:

div {
  box-shadow: 10px 10px 5px 12px grey;
}

Defina o parâmetro de inserção

O insetparâmetro altera a sombra de uma sombra externa (início) para uma sombra interna.

Um elemento <div> com uma sombra de caixa desfocada, cinza e inserida

Exemplo

Adicione o parâmetro de inserção:

div {
  box-shadow: 10px 10px 5px grey inset;
}

Adicionar várias sombras

Um elemento também pode ter várias sombras:

Exemplo

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Cartões

Você também pode usar a box-shadowpropriedade para criar cartões semelhantes a papel:

1

1º de janeiro de 2021

Noruega

Hardanger, Noruega

Exemplo

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Teste-se com exercícios

Exercício:

Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

❮ Previous Next ❯