使用CSS技巧切出边框

Question

问题......

我试图将div放在边框上，同时在每个div的两边留下间隙。见这里：

注意黑色div的任意一侧的差距。

除了明显的两个选项之外，我看不到可能的解决方案：

1. 在整个宽度上放置边框，然后使用背景覆盖图像以隐藏
背后的边框
2. 或者，将边框分成列，然后只添加边距（可能是我的最佳解决方案）

我尝试了什么......

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

我的问题（如果还不清楚）

是否有任何方法（除了上面提到的那些），或者很酷的技巧来实现我在上图中所说明的内容？

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

更新

这是一个jsFiddle显示它看起来像没有我想要的空白：

http://jsfiddle.net/BDt7v/

Answer 1

这个怎么样：让我们通过用一些生成的内容覆盖它来“切除”div的左边界和右边界 - 每个div得到一个：before和：生成内容伪元素之后，以及我们用高度设置的那些零和白色边框顶部和灰色边框 - 红色边框宽度的一半 - 然后我们绝对定位它们...... here's the fiddle。

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