¿Es posible que la sombra rodee todo el DIV?Añadir sombra de caja de CSS alrededor de todo el DIV
-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;
Sé que el orden de los atributos va:
Pero me pregunto si es posible hacer que la sombra pase alrededor de ella en lugar de mostrar solo en un borde o lado.
¿Solo cero los desplazamientos?
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;
No funciona en IE <8. ¿Alguna solución? – Si8
@ SiKni8 Sí, imágenes ... –
Sí @ SiKni8 desinstalar y obtener un nuevo navegador. –
Sí, no una desviación vertical u horizontalmente, y utilizar un radio relativamente grande desenfoque: fiddle
Además, se pueden utilizar varios cajones-sombras si los separa con una coma. Esto le permitirá ajustar con precisión dónde se difuminan y cuánto extienden. El ejemplo que proporciono es indistinguible de una gran outline, pero puede ser sintonizado fino significativamente más: fiddle
se ha perdido el último y más relevante propiedad de box-shadow, que es spread-distance. Puede especificar un valor para la cantidad expande o se contrae la sombra (hace que mi segundo ejemplo obsoleta): fiddle
La lista de propiedades completo es:
box-shadow: [horizontal desplazamiento] [vertical de desplazamiento] [blur-radius] [spread-distance] [color] recuadro?
Pero aún mejor, lea el spec.
Simplemente use el siguiente código. Será sombra rodear todo el DIV
-webkit-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); -moz-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
la esperanza que esto funcionará
Por qué una falta de definición 5px para Mozilla y WebKit, pero 3px para otros? – BoltClock
Porque estaba en Chrome cuando lo probaba, así que solo cambié la sombra de cuadro ... lo siento – Warface