¿Cómo aplicar box-shadow en los cuatro lados?

84

Estoy tratando de aplicar un box-shadowen los cuatro lados. Solo pude conseguirlo en 2 lados:

css box-shadow libélula
fuente
2
CSS3please.com siempre es útil para este tipo de cosas ...
sscirrus

Respuestas:

139

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.

Damb
fuente
1
+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
1
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
1
@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
34

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;
}
treinta y dos
fuente
Sé para qué sirve cada valor en la sombra del cuadro con 3 valores + color. ¿Qué significa este valor 4?
libélula
1
Leer: developer.mozilla.org/En/CSS/Box-shadow - específicamente, es el "radio de propagación".
thirtydot
Creador de violín - MVP.
Terrance00
10

Esto se ve genial.

-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
Nalan Madheswaran
fuente
10

Tan simple como este código:

box-shadow: 0px 0px 2px 2px black; /*any color you want*/
Pankskie
fuente
5

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);
Seshu
fuente
4

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*/
Huzaif Sayyed
fuente
2

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);
}
user3619130
fuente
1
es apropiado como las otras respuestas en este sitio, pero a medida que se esfuerza, voy a votar su respuesta.
blueray
1

Sombra de caja CSS3: simetría de 4 lados

  1. 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>
Expandir fragmento

  1. 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>
Expandir fragmento

capturas de pantalla

refs

https://css-tricks.com/almanac/properties/b/box-shadow/

https://www.cnblogs.com/xgqfrms/p/13264347.html

xgqfrms
fuente
0

Utilice este código CSS para los cuatro lados: box-shadow: 0px 1px 7px 0px rgb (106, 111, 109);

Bal mukund kumar
fuente
0

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);
Ans
fuente