为什么CSS边框重叠会使边框看起来更厚？

Question

代码： http://jsfiddle.net/s08nypfd/62/ 内部块的边框重叠，看起来非常厚，有解决方法吗？ 在Firefox和Chrome中呈现不同。 HTML

<div class="main_block">
  <div class="block"></div>
</div>

CSS

.main_block{
  width:400px;
  height:100px;
  background:#888;
  border:1px solid black;
}
.block{
  width:100px;
  height:100px;
  border:1px solid red;
}

- Akshay Kumar

---

什么是问题？ - Wais Kamal

这是因为“block”嵌套在“main_block”内部，所以你看到的就是这样。你能否更具体地说明你希望它看起来像什么？ - Rik Lewis

检查一下类名为“block”的元素，它看起来非常粗糙。我想修复它。 - Akshay Kumar

Answer 1

在.block上设置margin-*值：

.block{
  width:100px;
  height:100px;
  border:1px solid red;
  margin-left: -1px;
  margin-top: -1px;
}

Updated Fiddle

- J. Titus

---

我刚在Firefox中测试了一下，看起来和Chrome中一样。你用的是哪个版本？我用的是50.1.0。 - J. Titus

Answer 2

你需要尝试使用box-sizing属性。如果你按照某处的建议设置了负边距，那么当你更改边框粗细时，设计会崩溃。

此外，你可以对主块使用一个小技巧 - 设置border: none，然后用内嵌式的盒子阴影代替边框。

You need to set box-sizing for block (which will work well in chrome and FF):

.main_block{
  width:400px;
  height:100px;
  background:#888;
  border: none;
  box-shadow: 0 0 0 1px black inset;
}
.block{
  width:100px;
  height:100px;
  border:1px solid red;
  box-sizing: border-box;
}

<div class="main_block">
  <div class="block"></div>
</div>

- Banzay

Answer 3

如果您想让内部边框覆盖父元素的边框，请使用以下设置：

 .block{
  position: relative;
  top: -1px;
  left: -1px;
  width:100px;
  height:100px;
  border:1px solid red;
}

默认情况下，该位置在父元素的边框内部。上述设置将其移动到父元素的边框上（向上和向左移动一个像素），从而覆盖它。

以下是包含此内容的片段：

.main_block{
  width:400px;
  height:100px;
  background:#888;
  border:1px solid black;
}
.block{
  position: relative;
  top: -1px;
  left: -1px;
  width:100px;
  height:100px;
  border:1px solid red;
}

<div class="main_block">
  <div class="block"></div>
</div>

- Johannes