Sintaxis de Box Shadow
La propiedad CSS box-shadow acepta valores en el formato: offset-x offset-y blur-radius spread-radius color. La palabra clave opcional inset coloca la sombra dentro del elemento. Multiples sombras se separan por comas y se renderizan en orden de pila, con la primera sombra encima.
Creando profundidad realista
Los efectos de sombra realistas usan multiples capas con diferentes valores de desenfoque y opacidad. Una sombra cerrada con bajo desenfoque proporciona definición, mientras que una sombra más grande y difusa crea oclusion ambiental. Combinar dos o tres capas de sombra produce una elevacion natural que imita condiciones de iluminacion del mundo real.
Consideraciones de rendimiento
Las box shadows son aceleradas por GPU en navegadores modernos pero pueden impactar el rendimiento de renderizado cuando se aplican a muchos elementos simultaneamente. Evita animar box-shadow directamente; en su lugar, usa transiciones de opacidad en un pseudo-elemento con la sombra pre-aplicada.
Compatibilidad de navegadores
CSS box-shadow es soportado en todos los navegadores modernos incluyendo Chrome, Firefox, Safari y Edge. No se necesitan prefijos de proveedor. Para navegadores muy antiguos, considera proporcionar un borde sólido como respaldo. El soporte para inset y multiples sombras es universal.
