CSS边框-整齐地勾勒出一组div

我有一个'金发时刻'在这里-我相信这很容易，但我似乎不明白它

我有一个div网格（10行是清晰的：两行-每个都有10个FLOAT：固定大小的左div）

我想做的是给一组边界指定一个边界，这是可行的（无边界的边/单元有一个透明的边界来保持所有东西对齐），但是单个边界的工作方式，“角”留下了一个丑陋的效果

看看这个例子

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

为了澄清我的CSS，行有这个类

.row {
  clear: both;
}

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

这些细胞有这个类别

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

:

:

编辑

公认的解决方案是用填充物代替边框，这样可以使边框成正方形。见：

---

如果在整个正方形上放置边框，这就是边框的行为方式。如果你想避免这种情况，你应该给那些边上有黑色边框的盒子尺寸，边框的宽度不等于边框的宽度，所以先添加

border:none

，然后添加尺寸，比如如果正常高度是20，边框是5，你想在右边加边框，你可以设置：

height:30；宽度：25；右边框：5px实心
或尝试：

您应该在问题中提供您的标记和css，和/或对其进行修改（最好是两者都提供）。页面是用jQuery生成的，因此我没有任何代码要显示（即使我这样做了，显示100个空DIV语句也没有用，是吗？），然后将jQuery添加到JSFIDLE中。此外，如果页面显示的是空div，那么查看空div肯定会有所帮助。尤其是CSS。我认为——老实说，如果你没有从我的问题中获得足够的信息，你根本没有希望回答它——发布复杂的jQuery构建整个页面只是在搅浑……好吧——我可以看到你在那里做什么。问题是，CSS边框是整个DIV大小的一部分-如果我删除了边框（就像边框：没有一样？），那么我必须增加DIV的高度（每个缺少的边框增加5px），以保持所有内容对齐-这有点混乱！？你可以（也许）扩展边框的值，但我对此表示怀疑（我不是CSS禅师）。否则，在这种情况下，您可能需要找到一种方法将边框作为单个边框进行管理，并将背景色作为“边框”进行管理。通过使用填充在不需要的地方“替换”边框，您可以去掉角（很好），但因为一个单元格可以有多个边框类（例如右上角或左下角）你不容易做到这一点。唯一的解决方案是为topleft、topright、bottomleft和bottomright再添加4个类，我想——这会很有效……尝试过之后，它就足以满足我的需要了。我可以看到一个问题，如果你想使用一个图像作为背景（而不仅仅是一种颜色），因为填充不会扩展该图像-但我不知道这样做（还！），所以我想我们已经找到了答案！！如果旧IE不是问题，您可以将“-moz-box-size:border-box；”-webkit-box-size:border-box；box-size:border-box；”应用于divs。这样，边界将停止向块添加其宽度。如果你需要IE6-7，如果你将IE切换到“怪癖”模式，你仍然可以这样做，但是你可能需要在其他地方修复你的代码。出于一系列原因，我不想弄乱尺寸-另一个答案暗示你可以使用填充来“替换”边框tho，这似乎是可行的
.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;
}