Rimuovi il lato destro della casella shadow

Question

Ho trovato molti post simili a quello che sto chiedendo e ho lavorato per ore e alla fine ho deciso che probabilmente dovrei cercare un consiglio esterno :).

Sto provando ad ombreggiare 3 lati di un div usando box-shadow Voglio che il lato destro sia senza ombre ma non riesco a capirlo ci sono molti post su come disassemblare la parte superiore ma dopo innumerevoli sforzi ho potuto nemmeno applicare questo.

Answer 1

Penso che hai 2 opzioni:

1) Impostare l'allineamento orizzontale del vostro ombra a sinistra (valori negativi).

box-shadow: -30px 0px 10px 10px #888888; 

Anche se in questo modo non si avrà la stessa dimensione ombra nella parte superiore e inferiore.

2) Utilizzare un div all'interno di un div e applicare l'ombra a ciascuno.

.div1 
{ 
    box-shadow: -30px 10px 20px 10px #888888; 
} 
.div2 
{ 
    box-shadow: -30px -10px 20px 10px #888888; 
} 

Quindi dovrai solo la dimensione per quella che desideri.

Qui, hanno un jsfiddle: http://jsfiddle.net/EwgKF/19/

Answer 2

provare a utilizzare questo esempio ha scorretto bordo laterale:

JsBin Demo

Answer 3

Usa :after pseudo elemento: http://jsfiddle.net/romiguelangel/YCh6F/

HTML

<ul> 
    <li><a href="#">item</a></li> 
    <li class="hello"><a href="#">item with after element</a></li> 
</ul> 

CSS

li { 
    display: block; 
    position: relative; 
    -webkit-box-shadow: 0 0 2px 1px gray 
} 

.hello:after{ 
    display: block; 
    background-color: #f3f5f6; 
    width: 20px; 
    height: 38px; 
    content: " "; 
    position: absolute; 
    top: 0; 
    right: -10px 
} 

Answer 4

Se si desidera utilizzare la tecnologia sperimentale con solo partial support, è possibile utilizzare clip path property.

Questo ti fornirà esattamente l'effetto che credo tu stia cercando: una normale ombra di scatola sui bordi superiore, sinistro e inferiore e taglio pulito sul lato destro. Un sacco di altre soluzioni SO a questo problema si traducono in ombre che "dissipano" mentre si avvicinano al bordo che non deve avere ombra.

Nel tuo caso useresti il ​​percorso clip: inset (px px px px); dove i valori dei pixel sono calcolati dal bordo in questione (vedi sotto).

#container { 
    box-shadow: 0 0 5px rgba(0,0,0,0.8); 
    clip-path: inset(-5px 0px -5px -5px); 
} 

Ciò agganciare il div in questione:

• 5 pixel sopra il bordo superiore (per includere l'ombra)
• 0 pixel dal bordo destro (per nascondere l'ombra)
• 5 pixel dal bordo inferiore (per includere l'ombra)
• 5 pixel all'esterno del bordo sinistro (per includere l'ombra)

012.

Si noti che non sono necessarie virgole tra i valori dei pixel.

La dimensione del div può essere flessibile.