在框陰影上應用邊框

Question

有沒有辦法將邊框應用到框陰影本身而無需創建兩個單獨的div？

努力創造這樣的事情：

http://i42.tinypic.com/21npelc.jpg

Answer 1

這是我怎麼會去它僞元素，所以你不必再添加html。

HTML

<div class="box"> 

</div> 

CSS

.box { 
    width: 300px; 
    height: 80px; 
    background: black; 
    position: relative; 
} 

.box:after { 
    content: ""; 
    display: block; 
    width: 300px; 
    height: 80px; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    border: 1px solid black; 
} 

最後一個小提琴：Demo

這裏是它具有的box-shadow小提琴：Demo或Demo

Answer 2

您可以使用多個框的陰影，像這樣：

http://jsfiddle.net/chriscoyier/Vm9aM/

img { 

box-shadow: 
    0 0 0 10px hsl(0, 0%, 80%), 
    0 0 0 15px hsl(0, 0%, 90%); 
}