使用CSS技巧切出边框

Question

问题...

我试图把它放在div边界上,同时在每个边上留下一个空隙div.看这里:

注意黑色div两侧的间隙.

除了显而易见的两个选项之外,我看不到可能的解决方案:

1. 在整个宽度上放置边框,然后使用背景覆盖图像以隐藏后边框
2. 或者,将边框分成列,然后只添加一个边距(在我的情况下可能是最好的解决方案)

我试过的......

好吧,因为我希望被建议一个很酷的CSS技巧,我没有尝试任何东西,因为我不知道从哪里开始...因此,一个很酷的CSS技巧 ...

我的问题(如果还不清楚的话)

有没有任何方法(除了上面提到的方法),或者很酷的技巧来实现我在上图中所说明的内容？

如果除了我已经说过的方法之外没有其他解决方案,请不要浪费时间回答这个问题,因为我自己能够自己编写这些代码,而其他SO用户则更需要你的帮助:-)

更新

这是一个jsFiddle展示它看起来没有我想要的差距:

http://jsfiddle.net/BDt7v/

Answer 1

怎么样:让我们通过用一些生成的内容覆盖它来"删除"div的左边界和右边界 - 每个div得到一个:before和:生成内容伪元素之后,以及我们用高度为零的样式和一个白色的边框顶部和一个红色边框宽度的一半的灰色边框底部 - 然后我们绝对定位它们...... 这里是小提琴.

<div id="outer">
    <div></div>
    <div></div>
    <div></div>
</div>

#outer {
    margin-top:50px;
    padding-bottom:50px;
    border-top:4px solid red;
    background:#ccc;
    text-align:center;
}
#outer div {
    position:relative;
    display:inline-block;
    margin:-27px 25px 0 25px;
    width:50px;
    height:50px;
    background:#000;
}
#outer div:after, #outer div:before {
    content:" ";
    position:absolute;
    top:23px;
    width:5px;
    height:0;
    overflow:hidden;
    border-top:2px solid #fff;
    border-bottom:2px solid #ccc;
}
#outer div:after {
    left:-5px;
}
#outer div:before {
    right:-5px;
}