CSS Borders - 整齐地概述了一组DIV

Question

我在这里有一个“金发时刻” - 我确信这很容易，但我似乎无法弄明白。

我有一个DIV网格（10行清除：两个 - 每个都有10个FLOAT：固定大小的LEFT DIV）。

我想要做的是为这组中的一组分配一个边框，这是有效的（非边界的边/单元格具有透明的边框以保持一切对齐）但是个别边框的工作方式，“角落”离开一种难看的效果。

请参阅此示例

我是否错过了一个明显的技巧，只是让它成为一个坚固的盒子，而不是角落正在创造的“虚线”效果？

澄清我的CSS - 行有这个类

.row {
  clear: both;
}

并且单元格具有此类

.cell {
  float: left;
  border: 5px solid transparent;
}

以及0到4之间的类似

.top { // repeated for bottom, left and right ofc.
  border-top: 5px solid black;
}

Answer 1

Compare this：

div {
    border: 3px solid white;
    border-right: 3px solid black;
}

To this：

div {
    border: none;
    border-right: 3px solid black;
}

修改

接受的解决方案是使填充取代边界，这将使边界平方。参见：

http://jsfiddle.net/kCd7s/2/

Answer 2

如果在整个方块上放置边框，这就是边框的行为方式。如果你想避免这种情况，你应该在没有边框等于边框宽度的边上给出黑色边框尺寸的方框，所以首先添加border: none，然后添加尺寸，如果正常高度是20和border是5，你想要一个右边的边框，你可以设置：height: 30; width: 25; border-right: 5px solid;

Answer 3

或尝试this way：

.top::before,
.bottom::before,
.left::after,
.right::after {
    content: ".";
    width: 100%;
    height: 100%;
    background: black;
    display: block;
    font-size: 0;
    position: absolute;
}
.top::before {
    height: 5px;
}
.bottom::before {
    height: 5px;
    top: 35px;
}
.left::after {
    width: 5px;
}
.right::after {
    width: 5px;
    left: 35px;
}