CSSを使用して3面にグローを追加する

Question

私はL字型のソートを形成するために別のものと重なるボックスを持っています。したがって、L字型の全体をグローブで達成しようとしています。これらのボックスの1つ。

私はボックスシャドウプロパティを使用しようとしましたが、3つの側面でのみ機能するようには見えませんでした。これは正しい方法ですか、達成するために使用できる境界線を使用する別の方法です3面の輝き？

ここで私は

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

Answer 1

あなたはCSSでそれを行うことができます：プロパティの後。このように：

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

チェックこのhttp://jsfiddle.net/QBQJn/1/

Answer 2

を使用しようとしてきたコードは、ここでそれを行うための一つの方法ですされています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

あなたが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; 
} 

デモ：http://jsfiddle.net/QBQJn/