2

问题...

我试图将div' 放置在边界上，同时在每个div. 看这里：

边框剪裁

注意黑色 div 两侧的间隙。

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

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

我尝试过的...

好吧，当我来到 SO 希望被告知一个很酷的 CSS 技巧时，我没有尝试任何东西，因为我不知道从哪里开始......因此，一个很酷的 CSS 技巧......

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

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

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

更新

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

http://jsfiddle.net/BDt7v/

4

1 回答 1

5

怎么样：让我们通过用一些生成的内容覆盖 div 的左右边框来“剪掉”它的边框 - 每个 div 都有一个 :before 和 :after 生成的内容伪元素，以及我们设置的高度为零的元素和白色边框顶部和灰色边框底部宽度为红色边框宽度的一半 - 然后我们将它们绝对定位......这是小提琴。

<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;
}
于 2013-07-04T08:58:32.653 回答