Aggiunta di un bagliore su 3 lati usando i CSS

Question

Ho una scatola che si sovrappone ad un'altra per formare una sorta di forma a L, sto cercando di ottenere un bagliore attorno a tutta la forma a L che richiede quindi un bagliore solo su 3 lati di una di queste scatole.

Ho provato a usare la proprietà box-shadow ma non riesco a farlo funzionare solo per 3 lati, è questo il metodo corretto da usare o c'è un altro metodo che usa i bordi che potrei usare per ottenere un bagliore sui 3 lati?

Ecco il codice che ho cercato di utilizzare

-moz-box-shadow: 0 -1px 5px #80abc6; 
-webkit-box-shadow: 0 -1px 5px #80abc6; 
box-shadow: 0 -1px 5px #80abc6; 

Answer 1

si può fare con i CSS: dopo la proprietà. Come questo:

div{ 
    width:100px; 
    height:30px; 
    -moz-box-shadow: 0 -1px 15px #80abc6; 
    -webkit-box-shadow: 0 -1px 15px #80abc6; 
    box-shadow: 0 -1px 15px #80abc6; 
    margin:30px; 
    position:relative; 
} 
div:after{ 
    content:''; 
    width:10px; 
    height:100%; 
    background:#fff; 
    position:absolute; 
    top:0; 
    left:-10px; 
} 

Scegli questa http://jsfiddle.net/QBQJn/1/

Answer 2

Ecco un modo per farlo: http://jsfiddle.net/thirtydot/Wec5h/

HTML:

<div id="l"> 
    <div id="v"></div><div id="h"></div> 
</div> 

CSS:

#l { 
    padding: 20px; 
    border: 1px solid red; 
    float: left; 
} 
#v, #h { 
    -moz-box-shadow: 0 0 5px #80abc6; 
    -webkit-box-shadow: 0 0 5px #80abc6; 
    box-shadow: 0 0 5px #80abc6; 
    display: inline-block; 
    vertical-align: bottom; 
    position: relative; 
} 
#v { 
    width: 48px; 
    height: 192px; 
} 
#h { 
    width: 96px; 
    height: 48px; 
} 
#v:after { 
    content: ''; 
    position: absolute; 
    z-index: 1; 
    left: 0; 
    right: 0; 
    bottom: 38px; 
    left: 0; 
    height: 20px; 
    background: #fff; 
} 
#h:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: -10px; 
    width: 20px; 
    background: #fff; 
} 

Answer 3

è possibile utilizzare la proprietà clip:

div { 
    width: 100px; 
    height: 30px; 
    margin: 30px; 
    clip: rect(-15px,115px,45px,0); 
    position: absolute; 

    -moz-box-shadow: 0 -1px 15px #80abc6; 
    -webkit-box-shadow: 0 -1px 15px #80abc6; 
    box-shadow: 0 -1px 15px #80abc6; 
} 

Demo: http://jsfiddle.net/QBQJn/