透明边框添加到宽x高

Question

边界应该超出div的宽度x高度。但是这个jsfiddle - http://jsfiddle.net/L33cK/5/ - 显示边界

添加到div的宽度x高度时它们是透明的。我认为当给定透明的1px边框时，jsfiddle中的线为1px，但它是3px。

有谁知道这里发生了什么？我正在用Chrome看它。

由于

div#line {
    margin-left:100px;
    width:1px;
    height:200px;
    background-color:red;
    border:1px solid transparent;

}

1 个答案:

答案 0 :(得分：2)

边框是透明的，因此您可以通过它们看到div的背景。就这么简单。

在this updated fiddle中，我添加了另一个带有虚线边框的div。

background:red; border:10px dotted yellow

你可以看到边界点之间div的背景。

因此，如果您希望边框是身体背景的颜色，解决方案是不要让它们透明，而是给它们与身体相同的背景颜色。或者，使用边距而不是边框​​。

由于div处于 content-box 模式（*），因此CSS width属性不指定div的总外部宽度，而是指定其内容区域。外部宽度等于width加上填充的大小加上边框的大小。 （如果你给div一些填充，你会发现外部宽度变得更大，即使width属性仍然是1px。）

（*）您可以使用box-sizing属性更改此行为。有关如何使用它以及要应用的供应商前缀，请参阅MDN page。基本上，使用box-sizing: border-box，您告诉浏览器width将被视为元素的外部宽度而不是内容区域。

Answer 1

边框是透明的，因此您可以通过它们看到div的背景。就这么简单。

在this updated fiddle中，我添加了另一个带有虚线边框的div。

background:red; border:10px dotted yellow

你可以看到边界点之间div的背景。

因此，如果您希望边框是身体背景的颜色，解决方案是不要让它们透明，而是给它们与身体相同的背景颜色。或者，使用边距而不是边框​​。

由于div处于 content-box 模式（*），因此CSS width属性不指定div的总外部宽度，而是指定其内容区域。外部宽度等于width加上填充的大小加上边框的大小。 （如果你给div一些填充，你会发现外部宽度变得更大，即使width属性仍然是1px。）

（*）您可以使用box-sizing属性更改此行为。有关如何使用它以及要应用的供应商前缀，请参阅MDN page。基本上，使用box-sizing: border-box，您告诉浏览器width将被视为元素的外部宽度而不是内容区域。