在框阴影上应用边框

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

这是一个带有方框阴影的小提琴：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%);
}