Inset Box Shadow solo su un lato?

Question

E 'possibile avere in qualche modo solo un riquadro di ombreggiatura su un lato di un div? Si noti che sto parlando di un riquadro inset qui, non della normale ombra esterna.

Ad esempio, nel seguente JSFiddle, si vedrà che l'ombra interna appare su tutti e 4 i lati, in vari gradi.

Come faccio a visualizzarlo SOLO in alto? O al massimo SOLO in alto e in basso?

JSFiddle:http://jsfiddle.net/ahmadka/KFrun/

HTML:

<div class="myDiv"> 
    <div class="text"> 
     Lorem ipsum .... 
    </div> 
</div> 

CSS:

.box 
{ 
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000; 
    box-shadow: inset 0px 5px 10px 1px #000000; 
} 

.text 
{ 
    padding:20px; 
} 

Answer 1

Il trucco è una seconda .box-inner all'interno, che è più grande in larghezza rispetto alla originale .box e lo box-shadow viene applicato a tale.

Quindi, aggiunto più padding allo .text per compensare la larghezza aggiunta.

Questo è come la logica appare:

Ed ecco come è fatto in CSS:

larghezza

Usa max per .inner-box di non causare .box per ottenere più ampio, e overflow per assicurarsi il rimanente è troncato:

110% è più largo del genitore che è 100% nel contesto di un bambino (dovrebbe essere lo stesso quando il genitore .box ha una larghezza fissa, per esempio). margini negativi costituiscono per la larghezza e causano l'elemento per essere centrato (anziché solo la parte destra nascondiglio):

.box-inner { 
    width: 110%; 
    margin-left:-5%; 
    margin-right: -5%; 
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000; 
    box-shadow: inset 0px 5px 10px 1px #000000; 
} 

e aggiungere un po imbottitura sull'asse X per compensare la più ampia .inner-box:

.text { 
    padding: 20px 40px; 
} 

Here's a working Fiddle.

Se si controlla il violino, si vedrà:

Answer 2

Questo si avvicina un po '.

.box 
{ 
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000; 
    box-shadow: inset -1px 10px 5px -3px #000000; 
} 

Answer 3

provarlo, forse utile ...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9; 
        -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9; 
        -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9; 
        -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9; 

sopra CSS causa avete un'ombra scatola in fondo.
puoi rosso di più Here

Answer 4

Questo è quello che stai cercando. Ha degli esempi per ogni lato che vuoi con un'ombra.

Vedere il violino js per ulteriori esempi: http://jsfiddle.net/KFrun/171/

.top-box 
{ 
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4); 
} 
.left-box 
{ 
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4); 
} 
.right-box 
{ 
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4); 
} 
.bottom-box 
{ 
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4); 
} 

Answer 5

Piuttosto un po 'tardi, ma una risposta duplicato che non richiede alterare l'imbottitura o l'aggiunta di div in più può essere trovato qui: Have an issue with box-shadow Inset bottom only. Si dice: "Utilizzare un valore negativo per il quarto lunghezza, che definisce la distanza diffondere questo è spesso trascurato, ma supportato da tutti i principali browser"

Dal soggetto che risponde alla fiddle:

box-shadow: inset 0 -10px 10px -10px #000000;