html - 在框阴影上应用边框

Question

有没有办法在不创建两个单独的 div 的情况下将边框应用到框阴影本身？

尝试创建这样的东西:

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

最后一个 fiddle :Demo

这是一个带有盒子阴影的 fiddle :Demo或 Demo