为什么css边框重叠会使边框看起来更粗？

这里是我的代码.. http://jsfiddle.net/s08nypfd/62/为什么css边框重叠会使边框看起来更粗？

边框内块重叠，看起来很厚.. 有没有什么解决办法。 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; 
}

来源

2017-01-16 Akshay Kumar

问题是什么？ –

发生这种情况是因为“block”嵌套在“main_block”中，所以这就是您所看到的。你能更具体地说明你想要它看起来像什么吗？ –

检查类块的元素。它看起来很厚..我想解决这个问题。 –

上.block设置margin-*值：

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

Updated Fiddle

来源

2017-01-16 13:31:55

铬是固定的。但在Firefox中它不起作用 –

我刚刚在Firefox中测试过，它看起来和Chrome一样。什么版本？我在50.1.0。 –

如果你想在内部边界盖父元素的边框，使用这些设置：

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

来源

2017-01-16 13:36:18 Johannes

你需要玩box-sizing属性。如果您按照建议somwhere设置负边距，则只要您更改边框粗细，设计就会崩溃。

此外，您可以使用main_block的一个小技巧 - 设置border: none并设置插入框阴影而不是边框。

您需要设置box-sizing块（这将在Chrome和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>

来源

2017-01-16 13:40:52 Banzay

为什么css边框重叠会使边框看起来更粗？

回答

相关问题