Dodawanie blasku do 3 stron za pomocą CSS

Question

Mam pudełko, które zachodzi na inny, tworząc kształt litery L, staram się uzyskać poświatę wokół całego kształtu litery L, co wymaga świecenia tylko na 3 stronach jedno z tych pól.

Próbowałem używać właściwości box-shadow, ale wydaje mi się, że nie działa ona tylko dla 3 stron, czy jest to właściwa metoda użycia lub czy istnieje inna metoda użycia granic, które można wykorzystać do osiągnięcia blask z 3 stron?

Oto kod Próbowałem użyć

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

Answer 1

Można to zrobić z CSS: po nieruchomości. Tak:

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; 
} 

Sprawdź to http://jsfiddle.net/QBQJn/1/

Answer 2

Oto jeden ze sposobów, aby to zrobić: 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

Można użyć właściwości 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/