Función drop-shadow() de CSS
- Página anterior Función cubic-bezier() de CSS
- Página siguiente Función ellipse() de CSS
- Volver a la capa superior Manual de funciones de CSS
Definición y uso
CSS drop-shadow()
La función de filtro aplica efectos de proyección a las imágenes.
Ejemplo
Ejemplo 1
Añadir diferentes efectos de proyección a las imágenes:
#img1 { filter: drop-shadow(8px 8px 10px gray); } #img2 { filter: drop-shadow(10px 10px 7px lightblue); }
Ejemplo 2
Añadir diferentes efectos de proyección a las imágenes (usar sombras horizontales y verticales negativas):
#img1 { filter: drop-shadow(-8px -8px 10px gray); } #img2 { filter: drop-shadow(-10px -10px 7px lightblue); }
Sintaxis de CSS
drop-shadow(h-shadow v-shadow blur spread color)
Valor | Descripción |
---|---|
h-shadow |
Obligatorio. Especificar el valor en píxeles de la sombra horizontal. Un valor negativo colocará la sombra en el lado izquierdo de la imagen. |
v-shadow |
Obligatorio. Especificar el valor en píxeles de la sombra vertical. Un valor negativo colocará la sombra en la parte superior de la imagen. |
blur |
Opcional. Añadir un efecto de desvanecimiento a la sombra, en píxeles. Cuanto mayor sea el valor, más fuerte será el efecto de desvanecimiento (la sombra se hará más grande y más pálida). No se permite el uso de valores negativos. Si no se especifica un valor, el valor predeterminado es 0 (los bordes de la sombra son claros). |
spread |
Opcional. Debe ser un valor en píxeles. Un valor positivo hará que la sombra se expanda y se haga más grande, mientras que un valor negativo hará que la sombra se缩小. Si no se especifica, el valor predeterminado es 0 (la sombra es del mismo tamaño que el elemento). |
color |
Opcional. Añadir color a la sombra. Si no se especifica, el color depende del navegador (generalmente negro). |
Detalles técnicos
Versión: | Módulo de Efectos de Filtro de CSS Nivel 1 |
---|
Compatibilidad del navegador
Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
18 | 12 | 35 | 6 | 15 |
Páginas relacionadas
Referencia:Atributo filter de CSS
Referencia:Función blur() de CSS
Referencia:Función brightness() de CSS
Referencia:Función contrast() de CSS
Referencia:Función grayscale() de CSS
Referencia:Función hue-rotate() de CSS
Referencia:Función invert() de CSS
Referencia:Función opacity() de CSS
Referencia:Función saturate() de CSS
Referencia:Función sepia() de CSS
- Página anterior Función cubic-bezier() de CSS
- Página siguiente Función ellipse() de CSS
- Volver a la capa superior Manual de funciones de CSS