Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad text-shadow sombra añade al texto.
Esta propiedad acepta una lista separada por comas de las sombras que se aplicará al texto.
| Valor por defecto: | none |
|---|---|
| Heredado: | yes |
| animatable: | yes. Read about animatable Try it |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.textShadow="2px 5px 5px red" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
sintaxis CSS
text-shadow:h-shadow v-shadow blur-radius color|none|initial|inherit;Note: Para agregar más de una sombra al texto, añadir una lista separada por comas de sombras.
Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| h-shadow | Necesario. La posición de la sombra horizontal. Los valores negativos se les permite | Juegalo " |
| v-shadow | Necesario. La posición de la sombra vertical. Los valores negativos se les permite | Juegalo " |
| blur-radius | Opcional. El radio de desenfoque. El valor por defecto es 0 | Juegalo " |
| color | Opcional. El color de la sombra. Mira valores de color CSS para obtener una lista completa de los posibles valores de color | Juegalo " |
| none | Valor por defecto. Sin sombra | Juegalo " |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | Juegalo " |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Ejemplo
Este ejemplo demuestra una sombra de texto con un efecto de desenfoque:
h1 {
text-shadow: 2px 2px 8px #FF0000;
} Inténtalo tú mismo " Ejemplo
Este ejemplo demuestra sombra de texto en un texto blanco:
h1 {
color: white;
text-shadow:
2px 2px 4px #000000;
} Inténtalo tú mismo " Ejemplo
Este ejemplo demuestra sombra de texto con un resplandor de neón rojo:
h1 {
text-shadow: 0 0 3px #FF0000;
} Inténtalo tú mismo " Ejemplo
Este ejemplo demuestra sombra de texto con un resplandor de neón rojo y azul:
h1 {
text-shadow: 0 0 3px #FF0000,
0 0 5px #0000FF;
} Inténtalo tú mismo " Páginas relacionadas
CSS3 tutorial: Efectos de texto CSS3
Referencia HTML DOM: textShadow property