Estoy tratando de aplicar un box-shadowen los cuatro lados. Solo pude conseguirlo en 2 lados:
¿Cómo aplicar box-shadow en los cuatro lados?
Respuestas:
Es debido a la compensación xey. Prueba esto:
-webkit-box-shadow: 0 0 10px #fff;
box-shadow: 0 0 10px #fff;
editar (año después ..): Hizo la respuesta más entre navegadores, como se solicita en los comentarios :)
Por cierto: hay muchos generadores css3 hoy en día ... css3.me , css3maker , css3generator , etc.
+1 porque obtuvo la respuesta correcta más rápido, aunque se ve mejor con un radio más pequeño y un valor de dispersión.
—
thirtydot
Gracias. Estaba mirando su primera respuesta y pensé que me equivoqué en la pregunta :)
—
Damb
debería hacer que su respuesta sea más cruzada entre navegadores.
—
Lucas
No estoy seguro de por qué, pero esto no me funciona. No obtengo ninguna sombra de caja cuando uso esto. Si uso la respuesta publicada por @thirtydot, entonces funciona. Tienes que difuminar y extender si los dos primeros valores son 0. Esto está sucediendo en Chrome.
—
Charles Williams
@thirtydot - Tienes razón, con un fondo más claro, puedes verlo. Pero si su fondo es negro, no podrá verlo en absoluto. Así que supongo que no debería decir que no funciona. Pero definitivamente no es visible sin la extensión cuando tiene un fondo negro, independientemente del color de la sombra del cuadro. Incluso con rojo, parece que su borde es ligeramente rojo, pero no hay una sombra de cuadro "visible". Entonces, si tiene un fondo más claro, supongo que esta solución funcionaría. Para un fondo muy oscuro, esta solución no es confiable. jsfiddle.net/vkzd71rc vs jsfiddle.net/vkzd71rc/1
—
Charles Williams
Ver: http://jsfiddle.net/thirtydot/cMNX2/8/
input {
-webkit-box-shadow: 0 0 5px 2px #fff;
-moz-box-shadow: 0 0 5px 2px #fff;
box-shadow: 0 0 5px 2px #fff;
}
Sé para qué sirve cada valor en la sombra del cuadro con 3 valores + color. ¿Qué significa este valor 4?
—
libélula
Leer: developer.mozilla.org/En/CSS/Box-shadow - específicamente, es el "radio de propagación".
—
thirtydot
Creador de violín - MVP.
—
Terrance00
Esto se ve genial.
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
Comprender la sintaxis de la sombra de caja y escribirla en consecuencia
box-shadow: h-offset v-offset blur spread color;
h-offset: Desplazamiento horizontal de la sombra. Un valor positivo coloca la sombra en el lado derecho del cuadro, un valor negativo coloca la sombra en el lado izquierdo del cuadro - Obligatorio
v-offset: Desplazamiento vertical de la sombra. Un valor positivo coloca la sombra debajo del cuadro, un valor negativo coloca la sombra sobre el cuadro - Requerido
desenfoque: radio de desenfoque (cuanto mayor sea el número, más borrosa será la sombra) - Opcional
color: Color de la sombra - Opcional
propagación: radio de propagación. Un valor positivo aumenta el tamaño de la sombra, un valor negativo disminuye el tamaño de la sombra - Opcional
recuadro: cambia la sombra de una sombra exterior a una sombra interior - Opcional
box-shadow: 0 0 10px #999;
box-shadow funciona mejor con spread
box-shadow: 0 0 10px 8px #999;
use 'inset' para aplicar sombra dentro de la caja
box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;
use rgba (rojo verde azul alfa) para ajustar la sombra de manera más eficiente
box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8);
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8);
La solución más simple y la forma más sencilla es agregar sombra para los cuatro lados. CSS
box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/
Encontré el http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ sitio.
.allSides
{
width:350px;height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
es apropiado como las otras respuestas en este sitio, pero a medida que se esfuerza, voy a votar su respuesta.
—
blueray
Sombra de caja CSS3: simetría de 4 lados
- cada lado con el mismo color
:root{
--color: #f0f;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background: #ccc;
}
.four-sides-with-same-color {
box-shadow: 0px 0px 10px 5px var(--color);
}<div class="four-sides-with-same-color"></div>
- cada lado con un color diferente
:root{
--color1: #00ff4e;
--color2: #ff004e;
--color3: #b716e6;
--color4: #FF5722;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background-color: rgba(255,255,0,0.7);
}
.four-sides-with-different-color {
box-shadow:
10px 0px 5px 0px var(--color1),
0px 10px 5px 0px var(--color2),
-10px 0px 5px 0px var(--color3),
0px -10px 5px 0px var(--color4);
}<div class="four-sides-with-different-color"></div>capturas de pantalla
refs
Utilice este código CSS para los cuatro lados: box-shadow: 0px 1px 7px 0px rgb (106, 111, 109);
Puedes diferentes combinaciones en el siguiente enlace.
https://www.cssmatic.com/box-shadow
Los resultados que necesita se pueden lograr con el siguiente CSS
-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);