Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade text-shadow acrescenta sombra ao texto.
Essa propriedade aceita uma lista separada por vírgulas de sombras para ser aplicado ao texto.
| Valor padrão: | none |
|---|---|
| Herdado: | yes |
| Animatable: | yes. Read about animatable Try it |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.textShadow="2px 5px 5px red" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3,5 | 4.0 | 9,6 |
CSS Syntax
text-shadow:h-shadow v-shadow blur-radius color|none|initial|inherit;Note: Para adicionar mais do que uma sombra ao texto, adicionar uma lista separada por vírgulas de sombras.
Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| h-shadow | Requeridos. A posição da sombra horizontal. Os valores negativos são permitidos | Jogue " |
| v-shadow | Requeridos. A posição da sombra vertical. Os valores negativos são permitidos | Jogue " |
| blur-radius | Opcional. O raio de desfoque. O valor padrão é 0 | Jogue " |
| color | Opcional. A cor da sombra. Olhe para valores de cor CSS para uma completa lista de possíveis valores de cor | Jogue " |
| none | Valor padrão. Sem sombra | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Exemplo
Este exemplo demonstra um text-shadow com um efeito de borrão:
h1 {
text-shadow: 2px 2px 8px #FF0000;
} Tente você mesmo " Exemplo
Este exemplo demonstra text-shadow em um texto branco:
h1 {
color: white;
text-shadow:
2px 2px 4px #000000;
} Tente você mesmo " Exemplo
Este exemplo demonstra text-shadow com um brilho de néon vermelho:
h1 {
text-shadow: 0 0 3px #FF0000;
} Tente você mesmo " Exemplo
Este exemplo demonstra text-shadow com um brilho de néon vermelho e azul:
h1 {
text-shadow: 0 0 3px #FF0000,
0 0 5px #0000FF;
} Tente você mesmo " Páginas relacionadas
Tutorial CSS3: Efeitos CSS3 texto
HTML DOM de referência: textShadow property