Se utiliza para proyectar sombras (a menudo llamadas "Sombras paralelas", como en Photoshop) a partir de elementos. A continuación, se muestra un ejemplo con la mayor compatibilidad posible con el navegador:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )Ese es:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- El desplazamiento horizontal (obligatorio) de la sombra, positivo significa que la sombra estará a la derecha del cuadro, un desplazamiento negativo colocará la sombra a la izquierda del cuadro.
- El desplazamiento vertical (requerido) de la sombra, uno negativo significa que la sombra del cuadro estará encima del cuadro, uno positivo significa que la sombra estará debajo del cuadro.
- El radio de desenfoque (obligatorio), si se establece en 0, la sombra será nítida, cuanto mayor sea el número, más borrosa será y más se extenderá la sombra. Por ejemplo, una sombra con 5 px de desplazamiento horizontal que también tiene un radio de desenfoque de 5 px tendrá 10 px de sombra total.
- El radio de expansión (opcional), los valores positivos aumentan el tamaño de la sombra, los valores negativos disminuyen el tamaño. El valor predeterminado es 0 (la sombra tiene el mismo tamaño que el desenfoque).
- Color (obligatorio): toma cualquier valor de color, como hexadecimal, con nombre, rgba o hsla. Si se omite el valor del color, las sombras de los cuadros se dibujan en el color de primer plano (texto
color). Pero tenga en cuenta que los navegadores WebKit más antiguos (anteriores a Chrome 20 y Safari 6) ignoran la regla cuando se omite el color.
Usar un color semitransparente como rgba(0, 0, 0, 0.4)es más común, y un efecto agradable, ya que no cubre completamente / opacamente lo que está encima, pero permite que lo que está debajo se vea un poco, como una sombra real.
Ejemplo
Sombra interior
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Ejemplo
Internet Explorer (8 y versiones posteriores) Box Shadow
Necesitas un elemento adicional, pero es posible filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Solo un lado
Usando un radio de extensión negativo, puede apretar la sombra de una caja y solo empujarla por un borde de la caja.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Múltiples fronteras y más
Puede separar la sombra de cuadro con comas tantas veces como desee. Por ejemplo, esto muestra dos sombras con diferentes posiciones y diferentes colores en el mismo elemento:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;El ejemplo muestra cómo puede usar eso para crear múltiples bordes:
¡Vea la frescura de la caja-sombra de Pen Multiple! por Chris Coyier (@chriscoyier) en CodePen.
Al aplicar las sombras a los pseudo elementos que luego manipula, puede obtener algunas sombras de caja de aspecto 3D bastante elegantes:
Vea los efectos de sombras de caja de CSS3 de la pluma de Halil İbrahim Nuroğlu (@haibnu) en CodePen.
Sombras súper suaves a través de múltiples valores separados por comas:
Vea la
sombra de caja suave Pen de Chris Coyier (@chriscoyier)
en CodePen.
Soporte del navegador
Consulte el fragmento en la parte superior de la página para obtener información específica sobre la cobertura del prefijo de proveedor. Esta es una de esas propiedades en las que eliminar los prefijos es bastante razonable en este momento.