CSS Box Shadow Bottom Only

263

¿Cómo puedo hacer esto? Quiero que mi elemento se vea como si tuviera una sombra subrayada. No quiero la sombra para los otros 3 ladosCSS Box Shadow Bottom Only

Fuente

2010-12-30 WillingLearner

Pruebe también [** este método **] (http://stackoverflow.com/a/24698566/1677209) si tiene fondo monocromático – T30

578

hacer esto:

box-shadow: 0 4px 2px -2px gray;

es en realidad mucho más simple, lo que cada vez se establece la falta de definición de (3ª valor), establezca la propagación (cuarto valor) a la negativa de la misma.

Fuente

2011-06-05 21:08:28

Este es de lejos el mejor método. Pure css3, sin hacks. – thelastshadow

Gracias por esto. –

+121

Por si alguien quiere entender por qué esto funciona: * El primer valor establece el desplazamiento x de la fuente de luz a 0. * El segundo valor establece el desplazamiento y de la fuente de luz a +4. * El tercer valor establece un efecto de desenfoque de 2px. (Hace que la sombra no sea uniforme). * El cuarto valor establece un spread en -2px. (Contrate la sombra 2px.) Esto hará que la sombra sea 4px menos ancha que el elemento que está sombreando, por lo tanto, establezca el último valor en 0 si solo desea un subrayado simple. –

Puede usar dos elementos, uno dentro del otro, y dar el exterior overflow: hidden y un ancho igual al elemento interior junto con un relleno inferior para que la sombra en todos los otros lados están "cortados"

#outer { 
    width: 100px; 
    overflow: hidden; 
    padding-bottom: 10px; 
} 

#outer > div { 
    width: 100px; 
    height: 100px; 
    background: orange; 

    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4); 
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4); 
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4); 
}

Alternativamente, flotar el elemento exterior para provocar que se encoja con el tamaño del elemento interior. Ver: http://jsfiddle.net/QJPd5/1/

Fuente

2010-12-30 08:39:30

Esta solución es fantástica si tiene que mostrar la sombra para todas las ventanas- tamaño. – JeanValjean

probar este

-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75); 
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75); 
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);

Se puede ver en http://jsfiddle.net/wJ7qp/

Fuente

2011-08-14 23:32:53

Funciona bien para mí con 20px '0 20px 20px' – Meloman

probar esto para obtener la caja-sombra bajo su control total.

<html> 

    <head> 
     <style> 
      div { 
       width:300px; 
       height:100px; 
       background-color:yellow; 
       box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
     </div> 
    </body> 

    </html>

esto se aplicaría a la caja de sombra exterior también.

Fuente

2012-12-03 10:21:45

¿Cómo obtener desenfoque con esta técnica? –

Respuesta

Cuestiones relacionadas