Html 使用CSS技巧裁剪边框 问题是。。。

我试图将

div

放置在边界上，同时在每个

div

的两侧留一个间隙。请看这里：

注意黑色div两侧的间隙。

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

在整个宽度上放置边框，然后用背景覆盖图像以隐藏后面的边框

或者，将边框分隔成列，然后只添加一个边距（可能是我的最佳解决方案）

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

我的问题（如果还不清楚） 是否有任何方法（除了上面提到的方法）或很酷的技巧来实现我在上图中所示的效果

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

更新 下面是一个JSFIDLE演示它的外观，没有我想要的间隙：

这样如何：让我们通过覆盖一些生成的内容来“剪切”div的左右边框-每个div都有一个：before和：after生成的内容伪元素，而那些我们设计的高度为零，顶部为白色边框，底部为红色边框宽度的一半的灰色边框——然后我们就完全定位了它们

#外{
边缘顶部：50px；
填充底部：50px；
边框顶部：4倍纯红；
背景：#ccc；
文本对齐：居中；
}
#外分区{
位置：相对位置；
显示：内联块；
利润率：-27px25px25px；
宽度：50px；
高度：50px；
背景：#000；
}
#外分区：后，#外分区：前{
内容：“；
位置：绝对位置；
顶部：23px；
宽度：5px；
身高：0；
溢出：隐藏；
边框顶部：2个实心#fff；
边框底部：2个实心#ccc；
}
#外分区：后分区{
左：-5px；
}
#外分区：前{
右：-5px；
}

用它创建一个JSFIDLE。我认为你应该能够做一些类似于在正方形上使用边距的事情。@AleksG在不知道HTML/CSS应该是什么的情况下，我如何创建一个JSFIDLE。有几种方法可以格式化此HTML…创建一种您尝试过的方法并添加问题的链接。@AleksG我看不出这是如何工作的，因为边距不会覆盖红色边框…这太棒了，我认为可能会建议这样做。所以+1，谢谢你！然而，有一个小小的障碍可能会导致这一失败。白色部分（

#fff

）实际上是纹理背景（

背景图像：url（xxx）repeat；

）。。。这会弄乱你的解决方案吗？目前为止非常感谢：-DIn此外，我使用的HTML是给定每个

div

中包含的内容时我将使用的HTML。。这会阻止你的解决方案工作吗？事实上，为了让后面的纹理背景稍微简单一点（我认为），我实际上想将

#ccc

部分向上扩展，以与红线顶部对齐……事实上，我想我已经通过移除上边框和增加

边框底部的宽度对其进行了排序……是的，如果你愿意做出小小的妥协，这是很容易的。如果背景图像和灰色部分没有延伸到读取行的顶部，如果背景纹理相对于视口是固定的（如果可能的话，不确定您的想法），那么我们可以将生成内容的白色边框顶部替换为2px的高度，并给它们相同的固定背景，请看这里：
<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;
}