html - 使用 CSS 技巧剪切边框

Question

问题...

我试图将 div 放置在边框上，同时在每个 div 的两侧留下间隙。请参阅此处:

注意黑色 div 两侧的间隙。

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

1. 在整个宽度上放置边框，然后用背景覆盖图像以将边框隐藏在后面
2. 或者，将边框分成几列，然后添加边距(对于我来说可能是最好的解决方案)

我尝试过...

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

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

是否有任何方法(除了上面提到的方法之外)，或者很酷的技巧来实现我在上图中所示的效果？

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

更新

这是一个 jsFiddle 显示它的样子没有我想要的间隙:

http://jsfiddle.net/BDt7v/

Answer 1

这样怎么样:让我们通过用一些生成的内容覆盖它来“剪掉”div 的左右边框 - 每个 div 都有一个 :before 和 :after 生成的内容伪元素，以及我们使用高度设置样式的元素零和白色边框顶部和灰色边框底部的红色边框宽度的一半 - 然后我们将它们绝对定位... 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;
}