Thêm ánh sáng vào 3 mặt bằng cách sử dụng CSS

Question

Tôi có một hộp chồng lên nhau để tạo thành một loại hình chữ L, tôi cố gắng đạt được ánh sáng xung quanh toàn bộ hình dạng L, do đó chỉ cần chiếu sáng trên 3 mặt của một trong những hộp này.

Tôi đã thử sử dụng thuộc tính hộp bóng nhưng dường như không làm việc cho 3 mặt, đây là phương pháp đúng để sử dụng hoặc có phương pháp khác sử dụng đường viền mà tôi có thể sử dụng để đạt được một ánh sáng trên 3 mặt?

Đây là mã tôi đã cố gắng sử dụng

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

Answer 1

Bạn có thể làm điều đó với css: sau khi tài sản. Như thế này:

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

Kiểm tra này http://jsfiddle.net/QBQJn/1/

Answer 2

Dưới đây là một cách để làm điều đó: 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

Bạn có thể sử dụng clip tài sản:

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/